Bootstrap summernote，用其官网上的介绍就是“Super Simple WYSIWYG editor”，不过在我看来，与bootstrap中文官网上提供的“bootstrap-wysiwyg”要更simple，更漂亮，更好用！
虽然我之前尝试过使用bootstrap-wysiwyg，可参照Bootstrap wysiwyg富文本数据如何保存到mysql，但事后诸葛亮的经验告诉我，summernote绝对是更佳的富文本编辑器，这里对其工作team点三十二个赞！！！！！
经过一天时间的探索，对summernote有所掌握，那么为了更广大前端爱好者提供便利，我将费劲一番心血来介绍一下summernote，超级福利啊。
一、官方API和源码下载
工欲善其事必先利其器，首先把summernote的源码拿到以及对应官方API告诉大家是首个任务！
官网（demo和api）
github源码下载，注意下载开发版
二、效果图
效果图1
效果图2
效果图3
三、开讲内容
大的方向为以下三个内容：
summernote的页面布局（资源引入、初始参数）
summernote从本地上传图片方法（前端onImageUpload方法、后端springMVC文件保存）
summernote所在form表单的数据提交
①、summernote的页面布局
<%@ include file="/components/common/taglib.jsp"%>summernote - bs3fa4
html5的标记是必须的，注意千万不能是这种doctype，否则summernote的组件显示怪怪的，按钮的大小布局不一致，这里就不再上图了，但是千万注意！
bootstrap 的版本号最好为v3.3.5
1、布局div
相信你也看到了我为div加上的三个属性name、placeholder、action，那么我们来详细介绍一下三个属性的作用：
name，为外层form表单提供summernote数据保存时的数据模型的属性名，和input标签的name属性作用一致，稍候在form提交的时候具体介绍。
placeholder，很直白，为summernote提供初始状态的文本描述，当然还需要后续加工，div显然是不支持placeholder属性的。
action，为图片上传提供后端接收地址，稍候在介绍图片上传onImageUpload会再次用到。
另外${deal.description}其实你不需要太多关注，和textarea的赋值的用法一致，就是单纯的显示保存后的内容。
2、summernote初始化
使用jquery获取到页面上的summernote，对其进行初始化，我们来详细介绍列出参数的用法（先不介绍图片上传的onImageUpload 方法）。
lang ，指定语言为中文简体
placeholder ，summernote初始化显示的内容。
minHeight，最小高度为300，注意这里没有使用height，是有原因的，这里稍作解释，就不上图了。当使用height指定高度后，假如上传比height高的图片，summernote就不会自动调整高度，并且前文中“效果图3”中标出的红色区域会不贴着图片，而溢出到summernote外部。
dialogsFade，增加summernote上弹出窗口滑进滑出的动态效果。
dialogsInBody，这个属性也很关键，默认为false，字面上的意思是summernote的弹出框是否在body中（in嘛），设置为false时，dialog的式样会继承其上一级外部（如上文中的form-horizontal）容器式样，那么显示的效果就很别扭，这里也不再上图；那么设置为true时，就不会继承上一级外部div的属性啦，从属于body嘛。
disableDragAndDrop，设置为false吧，有的时候拖拽会出点问题，你可实践。
②、summernote从本地上传图片方法
1、前端onImageUpload方法
假如问度娘如下的话：“onImageUpload方法怎么写？”，度娘大多会为你找到如下回答：
以上资源来自于stackoverflow。
但其实呢，summernote-develop版本的summernote已经不支持这种onImageUpload写法，那么如今的写法是什么样子呢？参照summernote的官网例子。
onImageUpload
那么此时onImageUpload的具体写法呢？（后端为springMVC）：
输出返回数据 YUNM.debug(json); // 封装方法，主要是显示错误提示信息 YUNM.ajaxDone(json); // 状态ok时 if (json[YUNM.keys.statusCode] == YUNM.statusCode.ok) { // 文件不为空 if (json[YUNM.keys.result]) { // 获取后台数据保存的图片完整路径 var imageUrl = json[YUNM.keys.result].completeSavePath; // 插入到summernote $this.summernote('insertImage', imageUrl, function($image) { // todo，后续可以对image对象增加新的css式样等等，这里默认 }); } } }, // ajax请求失败时处理 error : YUNM.ajaxError }); }); } }注释当中加的很详细，这里把其他关联的代码一并贴出，仅供参照。
2、后端springMVC文件保存
2.1、为springMVC增加文件的配置
这里就不做过多介绍了，可参照我之前写的SpringMVC之context-dispatcher.xml，了解基本的控制器
2.2、FileController.java
2.3、FileService.java
2.4、UploadFile.java
后端文件保存方法也非常简单，懂java的同学都可以看得懂，那么对于后端不使用springmvc的同学，你可以再找找方法。
辛苦的介绍完前两节后，我们来一个动态图看一下效果吧！
③. summernote所在form表单的数据提交
这里，我们再回顾一下summernote所在的form表单，其中还包含了一个普通file的input标签，也就是说，该form还需要上传一张项目封面。
先看一下form的属性：
enctype：”multipart/form-data”，表明为文件类型的form保存
iframeCallback方法，稍候详细介绍，主要是对有文件上传的form表单进行封装。
1、iframeCallback
贴上全部代码以供参考，但是这里我们只讲以下部分：
通过form获取到summernote对象$this 后，通过!$this.summernote('isEmpty')来判断用户是否对富文本编辑器有内容上的填写，保证不为空，为空时，就弹出提示信息。
$this.summernote('code')可获得summernote编辑器的html内容，将其封装到input对象中，name为前文中div提供的name，供后端使用。
这里其他地方就不做多解释了，详细可参照Bootstrap wysiwyg富文本数据如何保存到mysql。
保存到数据库中是什么样子呢？
页面效果为：
好了，好了，终于写完了，没想到写的这么累，如果你有什么新鲜的玩意，也可以联系我啊，欢迎你的指导！
关于Bootstrap 富文本编辑器summernote小编就给大家介绍到这里，希望对大家有所帮助！有不同见解欢迎提出宝贵意见，共同学习进步！
下载本文