：
再用Jquery初始化该组件：
我们也可以自定义组件，如自定义编辑框的高度：
我们还可以自定义工具栏：
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,//禁用快捷键
还有回调函数：
回调函数里面的事件有 oninit，onenter，onfocus，onblur，onkeyup，onkeydown，onpaste,onImageUpload 等等，
这里主要介绍上传图片触发的事件 onImageUpload ：
插入图片的时候，Summernote组件默认是将图片以二进制形式展示的，如果以此方式将文本框的内容存储到数据库时，会导致数据库数据量很大
这是summernote默认方式插入图片时存储到数据库的字段：
所以这里采用另一个方法，就是将图片上传到服务器，上传成功后回传图片的访问地址到插入的图片位置，展示图片；
具体实现如下：
图片默认以二进制的形式存储到
数据库，
调用此
方法将请求
后台将
图片存储到服务器，返回
图片请求地址到前端
//将
图片放入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("
上传失败");
}
});
}
}
后台处理请求存储图片到服务器，成功则返回图片访问地址：
注意：我这里是将图片上传的真实地址和虚拟的图片访问地址在tomcat的server.xml中配置了映射关系，所以上传成功后返回给前端的是虚拟的访问地址；
0) {
/**
* picture
上传路径（+时间
文件夹）
*/
//真实的
上传根路径
String realUploadPath = 'D:/Program Files (x86)/apache-tomcat-8.5.16/webapps/file';
//虚拟的
文件访问根路径
String fictit
IoUsRoot = '/file'
//建立以时间命名的
文件夹
SimpleDateFormat sdf=new SimpleDateFormat("/yyyy/MM/dd/");
String datePath = sdf.format(new Date());
//最终真实路径
String realuUploadBrandPath = realUploadPath+"/content"+datePath;
//最终虚拟访问路径
String fictit
IoUsUploadBrandPath =fictit
IoUsRoot +"/content"+datePath;
//
上传文件原始
名称
String originFileName = picture.getOriginalFilename();
// 新的
文件名称
String newFileName = UUID.randomUUID()+originFileName.substring(originFileName.lastIndexOf("."));
//如果路径
文件夹不存在就创建
File dir=new File(realuUploadBrandPath);
if(!dir.exists()){
dir.mkdirs();
}
// 新
文件
File newFile = new File(realuUploadBrandPath+File.separator+newFileName);
// 将内存中的
文件写入磁盘
try {
picture.transferTo(newFile);
} catch (IllegalStateException | IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
//
文件虚拟地址
String fictit
IoUsFilePath = fictit
IoUsUploadBrandPath+newFileName;
return fictit
IoUsFilePath;
}
return "false";
}
建议：真实的上传根路径应写在properties配置文件中，方便日后地址的修改，同时虚拟的访问根路径也不应存储到数据库当中，只需存储相对位置就可以，将虚拟的访问根路径也写在properties文件当中。
通过上面的方法处理后，存储到数据库的字段：
获取编辑框内容的方法：
总结
以上所述是小编给大家介绍的基于BootStrap的文本编辑器组件Summernote。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
