引入js(需要先是引入jquery)
<script src="https://cdn.bootcss.com/wangEditor/3.0.16/wangEditor.min.js"></script>
定义div,显示富文本编辑器
<div id="editor" ></div>
js代码
在这里需要写上自己图片上传的后台url
<script>
var E = window.wangEditor;
var editor = new E('#editor');
editor.customConfig.debug = true;
//文件上传
editor.customConfig.uploadImgServer = '/BookSys/editorControl/upload'; //富文本编辑器中上传图片的后台url
editor.customConfig.uploadImgMaxSize = 5 * 1024 * 1024;//单文件大小
// editor.customConfig.uploadImgMaxLength = 5;//默认不限制
editor.customConfig.uploadFileName = 'imgs';//后台获取文件参数名
editor.customConfig.uploadImgHooks = {
customInsert: function (insertImg, result, editor) {
// 图片上传并返回结果,自定义插入图片的事件(而不是编辑器自动插入图片!!!)
// insertImg 是插入图片的函数,editor 是编辑器对象,result 是服务器端返回的结果
// result 必须是一个 JSON 格式字符串!!!否则报错
//result:errno =0 上传成功 data:图片路径的数组
// 举例:假如上传图片成功后,服务器端返回的是 {url:'....'} 这种格式,即可这样插入图片:(回显)
var url =result.data;
//回显
insertImg(url);
}
}
editor.create();
//提交时获取内容
function getContent() {
//获取内容
var content=editor.txt.html();
alert(content);
$("#content").val(content);
}
</script>