springboot——富文本编辑器

引入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>