基于BootStrap的文本编辑器组件Summernote

Summernote是一个基于jquery的自举超级简单的所见即所得在线编辑器。Summernote非常轻巧，只有30KB大小，支持Safari、Chrome、Firefox、Opera和Internet Explorer 9 (IE8支持即将到来)。

特点：

世界上最好的所见即所得在线编辑器

易于安装

源代码开放的

自定义初始化选项

支持快捷键

适用于各种后端程序语音

Summernote官方网站地址：https://summernote.org/

这是官网的一个例子：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title summer note/title link href=' http://netdna . bootstrapcdn.com/bootstrap/3 . 3 . 5/CSS/bootstrap . CSS ' rel=' external no follow ' rel='样式表' script src=' http :http://cdnjs . cloudflare.com/Ajax/libs/jquery/3 . 2 . 1/jquery . js '/script script src='ready(function(){ $(' # summer note '))。summer note()；});/脚本/正文/html渲染：

默认情况下，初始化组件的最简单方法是：

向正文添加容器div:

div id=' summer note ' hello summer note/div并用Jquery初始化组件：

$(文档)。ready(function(){ $(' # summer note '))。summer note()；});我们还可以自定义组件，例如编辑框的高度：

$ ('# summernote ')。summernote ({height : 300，//定义编辑框高度minHeight: null，//定义编辑框最小高度maxHeight: null，//定义编辑框最大高度})；我们还可以自定义工具栏：

！-工具栏- toolbar: [！-字体工具-['fontname '，['fontname']]，//字体系列['style '，['bold '，' italic '，'下划线'，' clear']，//字体加粗，字体斜体，字体下划线，字体格式clear ['font '，上标'，'下标']，//字体下划线，上标，下标['fontsize '，['fontsize']，//字体大小['color '，['color']，//字体颜色！-段落工具-['style '，['style']，//style ['para '，['ul '，' ol '，'段落']，//无序列表，有序列表，段落对齐['height '，['height']，/。-插入工具-['table '，['table']，//插入表格['hr '，['hr']，//插入水平线['link '，['link']，//插入链接['picture '，['picture']。-other-['fullscreen '，['fullscreen']，//全屏['codeview '，['codeview']]，//查看html代码['undo '，['undo']，//undo ['redo '，['redo]

Lang:'zh-CN '，//中文插件summernote-zh-cn.js占位符： '写在这里.'、//占位符dialogsInBody: true、//对话框放置在编辑框或Body dialogsinbody : true、///对话框显示效果disableDragAndDrop: true、///快捷键3360 False禁用。//快捷键被禁用。

还有回调函数：

Callbacks: {}回调函数中的事件包括oninit、onenter、onfocus、on bulr、onkeyup、onkeydown、onpaste、onImageUpload等。

本文主要介绍图片上传触发的图片上传事件：

插入图片时，默认情况下，Summernote组件以二进制形式显示图片。如果文本框的内容以这种方式存储在数据库中，将导致大量的数据库数据

默认情况下，当summernote插入图片时，这是存储在数据库中的字段：

因此，这里使用的另一种方法是将图片上传到服务器，上传成功后，将图片的访问地址返回到插入的图片位置显示图片；

具体实现如下：

回调： {onimageupload:函数(文件){//图片默认以二进制形式存储在数据库中。调用此方法将请求后台将图片存储到服务器，并将图片请求地址返回给前端。//将图片放入Formdate对象var formData=new formData()；//“图片”为后台获取的文件名，文件[0]为需要上传的文件formdata . append(‘图片’，文件[0])；$.Ajax ({type:' post '，URL : ' request background address '，cache: false，data:formdata，processdata: false，contenttype3360 false，datatype3360' text '，//请求成功后，后台返回图片访问地址字符串，因此是以文本格式而不是json格式成功获取的：函数(图片){$ ('# summernote ')。summernote ('insertimage '，图片)；}，error:function(){ alert('上传失败')；} });}}后台进程向服务器请求存储图片，成功后返回图片访问地址：

注意：我在tomcat的server.xml中配置了镜像上传的真实地址和虚拟镜像访问地址的映射关系，所以上传成功后虚拟访问地址返回前端；

@RequestMapping(值='contentFileUpload '，方法=RequestMethod。POST) @ResponseBody公共字符串contentFileUpload(多部分文件图片){ if(图片！=null picture . getoriginalfilename()！=null picture . getoriginalfilename()。修剪()。length () 0) {/* * *图片上传路径(时间文件夹)*///真实上传根路径字符串real upload path=' d :/程序文件(x86)/Apache-Tomcat-8.5.16/。//虚拟文件访问根路径String fictitiousRoot='/file//创建一个以时间命名的文件夹simple date format SDF=new simple date format('/yyyy/mm/DD/')；字符串DatePath=SDF . format(new Date())；//最终的真实路径字符串realuuploadbrandpath=real upload path/' content ' datepath；//最终的虚拟访问路径字符串fictitioussuploadbrandpath=fictitiousroot/' content ' datepath；//上传文件原始名称字符串原始文件名=picture . getoriginalfilename()；//新文件名为string new filename=uuid . randomuuid(). origin filename . substring(origin filename . last indexof('。'));//如果路径文件夹不存在，则创建filedir=new file(realuuploadbrandpath );if(！dir . exists()){ dir . mkdirs()；}//新文件file new file=new file(realuuploadbrandpath文件。分隔符new filename)；//将内存中的文件写入磁盘尝试{ picture . transfer to(new file)；} catch(illegalstatexception | IOException e){//TODO自动生成的catch块e . printstacktrace()；}//文件虚拟地址字符串虚拟文件路径=fictitioussuploadbrandpath new filename；返回fictitiousFilePath}返回“false”；}建议：真正的上传根路径应该写在properties配置文件中，方便以后修改地址。同时，虚拟访问根路径不应该存储在数据库中，只应该存储相对位置，虚拟访问根路径也应该写入属性文件。

通过上述方法处理后存储在数据库中的字段：

获取编辑框内容的方法：

var markupStr=$('#summernote ')。summernote('代码')；摘要

上面是Summernote，一个由边肖引入的基于BootStrap的文本编辑器组件。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！