超漂亮的Bootstrap 富文本编辑器summernote(超漂亮的38种刺绣图案)

编辑：rootadmin

推荐整理分享超漂亮的Bootstrap 富文本编辑器summernote(超漂亮的38种刺绣图案)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:超漂亮的风景头像图片,超漂亮的花草风景视频,超漂亮的花草风景视频,超漂亮的花草风景视频,超漂亮的花草风景图片,超漂亮的图片,超漂亮的头像卡通女,超漂亮的图片,内容如对您有帮助，希望把文章链接给更多的朋友！

Summernote 是一个简单，灵活，所见即所得（WYSIWYG）的编辑器，基于 jQuery 和 Bootstrap 构建。Summernote 所有主要的操作都支持快捷键，有一个功能强大的 API，它提供了大量的自定义选项的设计（宽，高，有效的项目等等）和功能。对于主要的脚本语言或框架（PHP，Ruby，Django，NodeJS），该项目有提供了集成示例。

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的页面布局

<!DOCTYPE html>html5的标记是必须的，注意千万不能是<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " 的版本号最好为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，最小高度为，注意这里没有使用height，是有原因的，这里稍作解释，就不上图了。当使用height指定高度后，假如上传比height高的图片，summernote就不会自动调整高度，并且前文中“效果图3”中标出的红色区域会不贴着图片，而溢出到summernote外部。

dialogsFade，增加summernote上弹出窗口滑进滑出的动态效果。dialogsInBody，这个属性也很关键，默认为false，字面上的意思是summernote的弹出框是否在body中（in嘛），设置为false时，dialog的式样会继承其上一级外部（如上文中的form-horizontal）容器式样，那么显示的效果就很别扭，这里也不再上图；那么设置为true时，就不会继承上一级外部div的属性啦，从属于body嘛。