由于一些项目上的原因以及相关因素，我们使用其他富文本编辑器替代了UMEditor
本来用CKEditor，但是团队觉得使用起来很不顺手，尤其图片上传十分不爽，功能复杂但是使用起来比较麻烦
后来我们又替换了summernote，这款编辑器名气没有ck大，但是简介直观，而且风格和项目很匹配，最终决定使用这款
这是github地址，先下载
https://github.com/summernote/summernote
然后在文件中引入css以及js，注意要使用国际化文件则引入语言包，不然默认显示英文
<!-- include summernote css/js-->
<link href="<%=request.getContextPath() %>/static/global/plugins/summernote/dist/summernote.css" rel="stylesheet">
<script src="<%=request.getContextPath() %>/static/global/plugins/summernote/dist/summernote.js"></script>
<script src="<%=request.getContextPath() %>/static/global/plugins/summernote/lang/summernote-zh-CN.js"></script>
在html中加入编辑器
<div> <div id="summernote" style="height: 300px;">Hello Summernote</div> </div>
最后初始化
$(document).ready(function() {
$("#summernote").summernote({
lang : "zh-CN",
height: 150,
callbacks: {
onImageUpload: function(files, editor, $editable) {
sendFile(files);
}
}
})
});
需要注意的是，默认上传是需要修改的，不然会以二进制的文件形式，性能受影响
function sendFile(files, editor, $editable) {
var size = files[0].size;
if((size / 1024 / 1024) > 2) {
alert("图片大小不能超过2M...");
return false;
}
var data = new FormData();
data.append("ajaxTaskFile", files[0]);
var hdnContextPath = $("#hdnContextPath").val();
$.ajax({
data : data,
type : "POST",
url : hdnContextPath + "/file/upload.action", // 图片上传出来的url，返回的是图片上传后的路径，http格式
cache : false,
contentType : false,
processData : false,
dataType : "json",
success: function(data) {//data是返回的hash,key之类的值，key是定义的文件名
$.each(data.data, function (index, file) {
$('#summernote').summernote('insertImage', file.url);
});
},
error:function(){
alert("上传失败");
}
});
}
后台代码就不放出了，之前讲过多次了，参照一下即可
最终需要注意的是，这个上传文件有个bug，就是选择文件的时候弹出框很慢，十分不爽，找到如下两个文件修改其中代码即可
