富文本编辑器

为了使文本输入更加多样，可以输入表情，图片等功能，于是便引入富文本编辑器

引入wnageditor.js文件

在自己的就是中进行富文本编辑器的相关配置

const E = window.wangEditor;
const editor = new E('#content');
const editUrl = '/upload';//服务器访问地址
editor.customConfig.uploadImgShowBase64 = true;  // 使用 base64 保存图片
editor.customConfig.uploadImgServer = editUrl; // 上传图片到服务器
editor.customConfig.showLinkImg = false;// 隐藏“网络图片”tab
//配置属性名称，绑定请求的图片数据
editor.customConfig.uploadFileName = 'wangEditorUrl';
editor.customConfig.withCredentials = true;
// 将图片大小限制为 5M
editor.customConfig.uploadImgMaxSize = 5 * 1024 * 1024;
editor.customConfig.uploadImgHooks = {
    success: function (xhr, editor, result) {
        // 图片上传并返回结果，图片插入成功之后触发
        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
        //console.log(result);
    },
    // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
    // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
    customInsert: function (insertImg, result, editor) {
        // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
        // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果

        // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
        let url = result.data.src;
        //console.log(url);
        insertImg(url)//回显到富文本里面
        // result 必须是一个 JSON 格式字符串！！！否则报错
    }
};

//富文本创建
editor.create();

这样富文本编辑器便建好了