【实践】简洁⼤⽅的summernote富⽂本编辑器插件的⽤发——实例篇
实例化后的summernote 是这样⼦的
很漂亮对吧，⽽我做成页⾯效果是这样的：
先说说实例化⼀个summernote 的⽅法把，其实也不难，jq 选择器选择⼀个要变成富⽂本编辑器的元素然后调⽤ summernote ⽅法传⼊⼀个对象作为参数便可，参数是⼀个对象，属性就是这个富⽂本的⼀些样式属性，如下：
上⾯的属性是⼀些⽐较常⽤的属性，更多属性可以查看官⽅⽂档。特别注意⼀点的是callbacks 属性，它的作⽤是summernote 编辑器⾥⾯的⼀些功能要实现的回调⽅法，这⾥我的需求只是上传图⽚所以只重写了⼀次 onImageUpload 这个⽅法，⽅法内部调⽤⼀个⾃⼰定义的函数（我是从百度的，后⾯会介绍这个函数）
实例化后，第⼀步要解决的就是样式问题。
我的做的效果是⼀个弹出层⾥⾯包含⼀个编辑内容的输⼊框，所以引发了以下的问题：
1、summernote 图⽚上传，视频上传的功能按钮点击后会弹出⼀个bootstrap 的模态框，⽽这个模态框刚好把这⼏个弹窗遮挡住了导致不能操作，问题效果图如下：
然后我右键检查这个⿊⾊背景究竟是什么东东发现了⼀些值得关注的问题：
留意这两个地⽅，就是这个 modal-backdrop 搞的⿁！你可以试试把右侧modal-backdrop 样式的 z-index 取消勾选，将会是如下效果：
哇塞原来罪恶的根源在 z-index 这⾥于是我知道怎么改了，把⾃⼰的css ⽂件改成如下这样即可：
⼀定要加上 !important 使其权重最⾼遮盖掉默认样式，于是上传图⽚的模态框便可以展现出来了。
接下来便是上传图⽚环节，⼀个富⽂本编辑器最有趣的地⽅就是可以上传图⽚，然后再存放在数据库，上⾯说到了重写上传图⽚的回调函数，所以这⾥把回调函数内部执⾏的sendFile 函数的代码贴上来：
//选择图⽚时把图⽚上传到服务器再读取服务器指定的存储位置显⽰在富⽂本区域内
function sendFile(files, editor, $editable) {
var formdata = new FormData();
formdata.append("file", $('.note-image-input')[0].files[0]);
$.ajax({
asp富文本编辑器data : formdata,
type : "POST",
url : "/umlProject/php/receiveFile.php", //图⽚上传出来的url，返回的是图⽚上传后的路径，http格式
cache : false,
contentType : false,
processData : false,
dataType : "json",
success: function(data) {
//data是返回的hash,key之类的值，key是定义的⽂件名
$('#user-work-content').summernote('insertImage', ssage);
},
error:function(){
alert("上传失败");
}
});
}
这个函数的原理是这样的：
因为summernote 上传图⽚的弹出层本⾝是⼀个选择⽂件的空间只不过样式设置得好看⼀点⽽已，另外这⾥⽤到了异步上传的⽅法使页⾯⽆刷新，所以就要⽤到 FormData 这个
⽅法，具体⽤法看上⾯的代码你就能懂，很简单。
然后发送ajax 请求，注意这⼏个属性：
cache : false,  //⽆缓存
contentType : false,  //不重写表单头部信息，因为提交过去的是上传⽂件的表单头部
processData : false //不序列化data 直接提交data
整个函数的思路是这样的：
1、⾸先，你要把需要上传的图⽚上传到后台作处理，后台把图⽚存放到服务器⽽不是数据库，数据库的表只保存着图⽚在服务器的路径；
2、后台处理成功之后记得返回⼀个图⽚的路径的数据给前端，然后前端将符⽂本编辑器的元素调⽤summernote('insertImage', ssage)⽅法把服务器的图⽚路径插⼊到符⽂本编辑器⾥⾯展现给⽤
然后在编辑完⽂本之后，就可以发送ajax 给后台，把⽂本内容（其实是⼀段html 代码）插⼊到数据库的表保存，输出的时候直接输出html 结构就可以呈现出来了。
值得注意的⼀点是，符⽂本内容的图⽚代码：
嗯，看上去没⽑病，数据库也可以顺利插⼊，但是取出的时候就出现⼤事故了！
因为我返回的是 json 格式的数据所以图⽚⾥⾯的双引号就会引起冲突！所以后台返回数据的时候⼀定要注意这⼀点，把双引号换成单引号，php 的⽅法是 place("被替换的
字符"，"替换的字符"，"要执⾏替换操作的字符串")
话到这⾥，summenote 的⼀些操作就介绍到这⾥了，如果有错误还望提出，⼀起进步！
下⼀篇会介绍⼀些 summernote 的⼩技巧：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。