Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器。Summernote非常的轻量级，大小只有30KB，支持Safari,Chrome,Firefox、Opera、Internet Explorer 9 +(IE8支持即将到来)。

特点：

世界上最好的WYSIWYG在线编辑器

极易安装

开源

自定义初化选项

支持快捷键

适用于各种后端程序言语

使用方法

下载地址：http://www.yyyweb.com/demo/inner-show/summernote.html

将下载下来的summernote文件解压，将解压的文件放入到项目中，显示如下：

然后在你需要调用的界面中引入核心文件，Summernote需要几个JS库的支持，所以得先引入其它库

<!-- include libries(jQuery, bootstrap, fontawesome) -->

<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css">

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script>

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">

<!-- include summernote css/js-->

<link href="summernote.css" />

<script src="summernote.min.js"></script>

写入html，只需在body中加入一个DIV元素，写上ID

<div id="summernote">Hello Summernote</div>

写入JS初始化插件

$(document).ready(function() {

        $('#summernote').summernote();

    });

最终代码

<!DOCTYPE html>

<html lang="en">

<head>

    <title>

    </title>

    <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.min.js"></script>

    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet">

    <script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script>

    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">

    <link href="~/js/summernote/dist/summernote.css" rel="stylesheet" />

    <script type="text/javascript" src="~/js/summernote/dist/summernote.min.js"></script>

</head>

<body>

    <div id="summernote">Hello Summernote</div>

    <script type="text/javascript">

        $(document).ready(function () {

            $('#summernote').summernote();

        });

    </script>

</body>

</html>

API

初始化Summernote

$('.summernote').summernote();

使用参数初始化

设定高度与焦点

$('.summernote').summernote({

  height: ,                 // set editor height

  minHeight: null,             // set minimum height of editor

  maxHeight: null,             // set maximum height of editor

  focus: true,                 // set focus to editable area after initializing summernote});

设定高度后，如果内容高度超过设定高度将出现滚动条，如果没有设定高度则一直往下挣开。设定focus为true时，打开页面后焦点定位到编辑器中。

自定义工具栏

$('.summernote').summernote({

  toolbar: [

    //[groupname, [button list]]

    ['style', ['bold', 'italic', 'underline', 'clear']],

    ['font', ['strikethrough']],

    ['fontsize', ['fontsize']],

    ['color', ['color']],

    ['para', ['ul', 'ol', 'paragraph']],

    ['height', ['height']],

  ]

});

预设参数

类型 按钮id 方法
Insert picture Insert a picture
link Insert a hyperlink
video Insert a video
table Insert a table
hr Insert a horizontal rule
Style style Format selected block
fontname Set font family
fontsize Set font size
color Set foreground and background color
bold Toggle weight
italic Toggle italic
underline Toggle underline
strikethrough Toggle strikethrough
clear Clearing all styles
Layout ul Make an un-ordered list
ol Make an ordered list
paragraph Set text alignment
height Set height of text
Misc fullscreen Toggle fullscreen editing mode
codeview Toggle wysiwyg and html editing mode
undo Undo
redo Redo
help Show help dialog

极简模式Air-mode

$('.summernote').summernote({

  airPopover: [

    ['color', ['color']],

    ['font', ['bold', 'underline', 'clear']],

    ['para', ['ul', 'paragraph']],

    ['table', ['table']],

    ['insert', ['link', 'picture']]

  ]

});

释放Summernote

$('.summernote').destroy();

取值与赋值

//取值

var sHTML = $('.summernote').code();

//同一页面多个summernote时，取第二个的值

var sHTML = $('.summernote').eq().code();

//赋值

$('.summernote').code(sHTML);

事件

oninit

$('#summernote').summernote({

  oninit: function() {

    console.log('Summernote is launched');

  }

});

onenter

$('#summernote').summernote({

  onenter: function(e) {

    console.log('Enter/Return key pressed');

  }

});

详细文件参见：http://www.jqcool.net/bootstrap-summernote.html

Bootstrap-基于jquery的bootstrap在线文本编辑器插件Summernote的更多相关文章

  1. 基于jquery的bootstrap在线文本编辑器插件Summernote

    Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...

  2. Jquery的bootstrap在线文本编辑器插件Summernote

    http://www.jqcool.net/demo/201407/bootstrap-summernote/ Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线 ...

  3. 基于jquery的bootstrap在线文本编辑器插件Summernote （转）

    Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...

  4. 基于jquery的bootstrap在线文本编辑器插件Summernote 简单强大

    Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...

  5. 基于JQuery的简单富文本编辑器

    利用jQuery实现最简单的编辑器 我试了很多种方法,目前最快捷能够实现及其简单的编辑可以使用 document.execCommand("ForeColor", "fa ...

  6. javascript 在线文本编辑器

    javascript 在线文本编辑器实现代码. 效果例如以下: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcGhwZmVuZ2h1bw==/font/5 ...

  7. 百度umeditor富文本编辑器插件扩展

    富文本编辑器在WEB开发中经常用到,个人比较喜欢用百度出的ueditor这款,ueditor这款本身支持插件扩展的,但是ueditor的mini版本 umeditor 就没有那么方便了,不过找了很多资 ...

  8. 基于jQuery点击图像居中放大插件Zoom

    分享一款基于jQuery点击图像居中放大插件Zoom是一款放大的时候会从原图像的位置以动画方式放大到画面中间,支持点击图像或者按ESC键来关闭效果.效果图如下: 在线预览   源码下载 实现的代码. ...

  9. 基于jQuery select下拉框美化插件

    分享一款基于jQuery select下拉框美化插件.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览   源码下 ...

随机推荐

  1. 工作流软件如何成为未来web的支柱

    此文作者是 Kevin Lindquist,工作流平台Decisions的营销负责人,原文发表于VB上. Web 3.0 正在敲门,但是开门的人你永远都想不到:工作流软件. 传统上工作流软件是企业级的 ...

  2. asp.net mvc将html编译

    从数据库查询出来的值,如果包含html标签并且通过MVC绑定页面的话,那么他会通过浏览器编译为字符串显示,所以我们有得在从新的转一次: HtmlString hh = new HtmlString(M ...

  3. 水晶報表中小寫變大寫的函數-VB

    Function total (ls as number) as string dim dx_sz as string dim dx_dw as string dim str_int as strin ...

  4. angular分页指令

    目前的多个项目中都用到分页这个功能,为了提高可复用性,我特地分离出来写了个分页的指令.直接贴代码,详情如下: index.html <body id="sBill" ng-c ...

  5. 一些嵌入式和FPGA相关模块的开源

    工作一年,整理下手头做过的东西,分享出来,希望能帮到大家. 嵌入式方面,主要集中在Xilinx家的器件上,ZYNQ居多.Linux相关的就不贴了,网上的资料太多,xilinx-wiki上资料都是比较全 ...

  6. KVC - 键值编码

    [基本概念] 1.键值编码是一个用于间接访问对象属性的机制,使用该机制不需要调用存取方法和变量实例就可访问对象属性. 2.键值编码方法在OC非正式协议(类目)NSKeyValueCoding中被声明, ...

  7. 在openshift上自定义node.js的版本

    https://github.com/ramr/nodejs-custom-version-openshift 由于是线上服务器,一步一步来: 先把上面的工程拉下来,覆盖到初始化的工程里,提交,让服务 ...

  8. JavaScript简介、语法

    一.JavaScript简介 1.JavaScript是个什么东西? 它是个脚本语言,需要有宿主文件,它的宿主文件是HTML文件. 2.它与Java什么关系? 没有什么直接的联系,Java是Sun公司 ...

  9. Best Practices for Using Alpha

    Alpha是图形界面开发中常用的特效,通常我们会使用以下代码来实现Alpha特效: view.setAlpha(0.5f); View.ALPHA.set(view, 0.5f); ObjectAni ...

  10. Listview 异步加载图片之优化篇（有图有码有解释）

    在APP应用中,listview的异步加载图片方式能够带来很好的用户体验,同时也是考量程序性能的一个重要指标.关于listview的异步加载,网上其实很多示例了,中心思想都差不多,不过很多版本或是有b ...