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库的支持，所以得先引入其它库

  1. <!-- include libries(jQuery, bootstrap, fontawesome) -->
  2. <script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
  3. <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css">
  4. <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script>
  5. <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
  6.  
  7. <!-- include summernote css/js-->
  8. <link href="summernote.css" />
  9. <script src="summernote.min.js"></script>

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

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

写入JS初始化插件

  1. $(document).ready(function() {
  2.         $('#summernote').summernote();
  3.     });

最终代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <title>
  5.     </title>
  6.     <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.min.js"></script>
  7.     <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet">
  8.     <script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script>
  9.     <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
  10.     <link href="~/js/summernote/dist/summernote.css" rel="stylesheet" />
  11.     <script type="text/javascript" src="~/js/summernote/dist/summernote.min.js"></script>
  12.  
  13. </head>
  14. <body>
  15.     <div id="summernote">Hello Summernote</div>
  16.     <script type="text/javascript">
  17.         $(document).ready(function () {
  18.             $('#summernote').summernote();
  19.         });
  20.     </script>
  21. </body>
  22. </html>

API

初始化Summernote

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

使用参数初始化

设定高度与焦点

  1. $('.summernote').summernote({
  2.   height: ,                 // set editor height
  3.  
  4.   minHeight: null,             // set minimum height of editor
  5.   maxHeight: null,             // set maximum height of editor
  6.  
  7.   focus: true,                 // set focus to editable area after initializing summernote});

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

自定义工具栏

  1. $('.summernote').summernote({
  2.   toolbar: [
  3.     //[groupname, [button list]]
  4.  
  5.     ['style', ['bold', 'italic', 'underline', 'clear']],
  6.     ['font', ['strikethrough']],
  7.     ['fontsize', ['fontsize']],
  8.     ['color', ['color']],
  9.     ['para', ['ul', 'ol', 'paragraph']],
  10.     ['height', ['height']],
  11.   ]
  12. });

预设参数

类型 按钮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

  1. $('.summernote').summernote({
  2.   airPopover: [
  3.     ['color', ['color']],
  4.     ['font', ['bold', 'underline', 'clear']],
  5.     ['para', ['ul', 'paragraph']],
  6.     ['table', ['table']],
  7.     ['insert', ['link', 'picture']]
  8.   ]
  9. });

释放Summernote

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

取值与赋值

  1. //取值
  2. var sHTML = $('.summernote').code();
  3. //同一页面多个summernote时，取第二个的值
  4. var sHTML = $('.summernote').eq().code();
  5. //赋值
  6. $('.summernote').code(sHTML);

事件

oninit

  1. $('#summernote').summernote({
  2.   oninit: function() {
  3.     console.log('Summernote is launched');
  4.   }
  5. });

onenter

  1. $('#summernote').summernote({
  2.   onenter: function(e) {
  3.     console.log('Enter/Return key pressed');
  4.   }
  5. });

详细文件参见：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. 点评VHDL语言

    (1)VHDL的描述风格及语法十分类似于一般的计算机高级语言,但是它是一种硬件描述语言.学好VHDL的关键是充分理解VHDL语句和硬件电路的关系.编写VHDL,就是在描述一个电路,我们写完一段程序后, ...

  2. 双积分式(A/D)转换器电路结构及工作原理

    1．转换方式 V-T型间接转换ADC. 2.  电路结构 图1是这种转换器的原理电路,它由积分器(由集成运放A组成).过零比较器(C).时钟脉冲控制门(G)和计数器(ff0-ffn)等几部分组成 图1 ...

  3. Java2_Java泛型

    一. 泛型概念的提出(为什么需要泛型)? 首先,我们看下下面这段简短的代码: 1 public class GenericTest { 2 3 public static void main(Stri ...

  4. Dynamips做CCNA的实验，说是找不到telnet的解决方案

    01.如果你的系统是32位的系统. 控制面板-程序与功能-启动或关闭windows功能-开启telnet(重启计算机就可以用telnet了) 02.如果你的系统是64位的系统. (1)控制面板-程序与 ...

  5. bzoj 3823: 定情信物 线性筛逆元

    3823: 定情信物 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 108  Solved: 2[Submit][Status] Descriptio ...

  6. PS字体工具字体显示不出来

    显示一个小点:搜索了各种答案,扩大字号(最大72)更改前景色和背景色,最正确的解释就是分辨率太低,我发现分辨率是1,一般的设置成300,1分辨率情况下可以在图层那选择文字图层,然后按ctrl+t,拉大 ...

  7. 今天把登陆注册给改成tab了

    真是解决了一个心头大患,本来以为必须请外包公司的工程师才做,自己研究了下也给解决了. 多亏去年做原型时学习了smarty.css.html这些最基本的网站前端开发的技术.FTP上传下载.linux的基 ...

  8. Unity3d 协程的注意问题（新手须注意，老手须加勉）

    关于unity3d的协程,非常的好用,比如等待几秒执行,等待下一帧执行等! 但是也有潜在的问题: 1.协程是单线程的,在主线程中完成 2.如果发现yield, 那么这一帧会结束,那么等下一帧调用此脚本 ...

  9. WIN32和Kernel)直接读写硬盘扇区

    第一篇写技术的文章哦,以前好少写文章,我的文字表达很差劲,大家不要笑哦.前几天仙剑4通关了,感觉好惆怅,什么都不想去做.今天看了一下书发现一篇比较好玩的文章,于是自己静静地实践一番.文章是<基于 ...

  10. Android用户界面 UI组件--TextView及其子类(五) DigitalClock,AnalogClock,RadioButton,CheckBox,ToggleButton汇总

    DigitalClock和AnalogClock两个时钟类 可以为DigitalClock设置背景图片,自定义时针,秒针,分针的样式 例子: <?xml version="1.0&qu ...