Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器。Summernote非常的轻量级，大小只有30KB，支持Safari,Chrome,Firefox、Opera、Internet Explorer 9 +(IE8支持即将到来)。
特点：
世界上最好的WYSIWYG在线编辑器
极易安装
开源
自定义初化选项
支持快捷键
适用于各种后端程序言语
Summernote官网地址 ：https://summernote.org/
这是官网的一个例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Summernote</title> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.8/summernote.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.8/summernote.js"></script> </head> <body> <div><p>Hello Summernote</p></div> <script> $(document).ready(function() { $('#summernote').summernote(); }); </script> </body> </html>
效果图：
最简单的默认初始化组件的方式：
在<body>添加一个容器<div>：
<div>Hello Summernote</div>
再用Jquery初始化该组件：
$(document).ready(function() { $('#summernote').summernote(); });
我们也可以自定义组件，如自定义编辑框的高度：
$('#summernote').summernote({ height: 300, // 定义编辑框高度 minHeight: null, // 定义编辑框最低的高度 maxHeight: null, // 定义编辑框最高德高度 });
我们还可以自定义工具栏：
<!--工具栏--> toolbar: [ <!--字体工具--> ['fontname', ['fontname']], //字体系列 ['style', ['bold', 'italic', 'underline', 'clear']], // 字体粗体、字体斜体、字体下划线、字体格式清除 ['font', ['strikethrough', 'superscript', 'subscript']], //字体划线、字体上标、字体下标 ['fontsize', ['fontsize']], //字体大小 ['color', ['color']], //字体颜色 <!--段落工具--> ['style', ['style']],//样式 ['para', ['ul', 'ol', 'paragraph']], //无序列表、有序列表、段落对齐方式 ['height', ['height']], //行高 <!--插入工具--> ['table',['table']], //插入表格 ['hr',['hr']],//插入水平线 ['link',['link']], //插入链接 ['picture',['picture']], //插入图片 ['video',['video']], //插入视频 <!--其它--> ['fullscreen',['fullscreen']], //全屏 ['codeview',['codeview']], //查看html代码 ['undo',['undo']], //撤销 ['redo',['redo']], //取消撤销 ['help',['help']], //帮助 ],
其它的一些初始化设置：
lang:'zh-CN', //设置中文，需引入中文插件summernote-zh-CN.js
placeholder: 'write here...', //占位符
dialogsInBody: true, //对话框放在编辑框还是Body
dialogsFade: true ,//对话框显示效果
disableDragAndDrop: true ,//禁用拖放功能
shortcuts: false ,//禁用快捷键
还有回调函数：
callbacks: { }
回调函数里面的事件有 oninit，onenter，onfocus，onblur，onkeyup，onkeydown，onpaste,onImageUpload 等等，
这里主要介绍上传图片触发的事件 onImageUpload ：
插入图片的时候，Summernote组件默认是将图片以二进制形式展示的，如果以此方式将文本框的内容存储到数据库时，会导致数据库数据量很大
这是summernote默认方式插入图片时存储到数据库的字段：
所以这里采用另一个方法，就是将图片上传到服务器，上传成功后回传图片的访问地址到插入的图片位置，展示图片；
具体实现如下：
callbacks: { onImageUpload: function(file) { //图片默认以二进制的形式存储到数据库，调用此方法将请求后台将图片存储到服务器，返回图片请求地址到前端 //将图片放入Formdate对象中 var formData = new FormData(); //‘picture'为后台获取的文件名，file[0]是要上传的文件 formData.append("picture", file[0]); $.ajax({ type:'post', url:'请求后台地址', cache: false, data:formData, processData: false, contentType: false, dataType:'text', //请求成功后，后台返回图片访问地址字符串，故此以text格式获取，而不是json格式 success: function(picture) { $('#summernote').summernote('insertImage',picture); }, error:function(){ alert("上传失败"); } }); } }
后台处理请求存储图片到服务器，成功则返回图片访问地址：