这次给大家带来bootstrap的文本编辑器组件summernote使用详解，bootstrap文本编辑器组件summernote使用详解的注意事项有哪些，下面就是实战案例，一起来看一下。
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="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="external nofollow" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.8/summernote.css" rel="external nofollow" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.8/summernote.js"></script>
</head>
<body>
<p id="summernote"><p>hello summernote</p></p>
<script>
$(document).ready(function() {
$('#summernote').summernote();
});
</script>
</body>
</html>
效果图：
最简单的默认初始化组件的方式：
在<body>添加一个容器<p>：
<p id="summernote">hello summernote</p>
再用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(上传失败);
}
});
}
}
后台处理请求存储图片到服务器，成功则返回图片访问地址：
注意：我这里是将图片上传的真实地址和虚拟的图片访问地址在tomcat的server.xml中配置了映射关系，所以上传成功后返回给前端的是虚拟的访问地址；
@requestmapping(value=contentfileupload,method=requestmethod.post)
@responsebody
public string contentfileupload(multipartfile picture) {
if (picture!=null && picture.getoriginalfilename()!=null && picture.getoriginalfilename().trim().length()>0) {
/**
* picture上传路径（+时间文件夹）
*/
//真实的上传根路径
string realuploadpath = 'd:/program files (x86)/apache-tomcat-8.5.16/webapps/file';
//虚拟的文件访问根路径
string fictitiousroot = '/file'
//建立以时间命名的文件夹
simpledateformat sdf=new simpledateformat(/yyyy/mm/dd/);
string datepath = sdf.format(new date());
//最终真实路径
string realuuploadbrandpath = realuploadpath+/content+datepath;
//最终虚拟访问路径
string fictitiousuploadbrandpath =fictitiousroot +/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 fictitiousfilepath = fictitiousuploadbrandpath+newfilename;
return fictitiousfilepath;
}
return false;
}
建议：真实的上传根路径应写在properties配置文件中，方便日后地址的修改，同时虚拟的访问根路径也不应存储到数据库当中，只需存储相对位置就可以，将虚拟的访问根路径也写在properties文件当中。
获取编辑框内容的方法：
var markupstr = $('#summernote').summernote('code');
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
操作search组件在键盘显示
使用es6中class类的静态方法
以上就是bootstrap的文本编辑器组件summernote使用详解的详细内容。