最常用的富文本编辑器--Wangediter--上传图片配置

<div id="editor—wrapper">
    <div id="toolbar-container"><!-- 工具栏 --></div>

创建编辑器和工具栏

js：

const {createEditor, createToolbar} = window.wangEditor

const editorConfig = {
    placeholder: '',
    onChange(editor) {
        const html = editor.getHtml()
        console.log('editor content', html)
        // 也可以同步到 <textarea>
    },
    MENU_CONF: {}
}

editorConfig.MENU_CONF['uploadImage'] = {
    fieldName: 'imgfile',
    server: '/mycsdn/kkSer', // 上传图片地址
}

kkSer是用来上传图片到服务端的servlet

@Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        JSONObject result = new JSONObject();

            Part filePart = request.getPart("imgfile"); // 获取上传的文件部分
            // 在这里执行图片上传的逻辑，将图片保存到指定的路径并生成对应的URL
            //D:\GitWorkSpace\gitee01\mycsdn\src\main\webapp\img
           // String uploadDirectory = "D:\\tomcat\\apache-tomcat-8.5.90-windows-x64\\apache-tomcat-8.5.90\\webapps\\mycsdn\\src\\main\\webapp\\img"; // 指定上传文件的保存路径
            String uploadDirectory = "D:\\GitWorkSpace\\gitee01\\mycsdn\\src\\main\\webapp\\img"; // 指定上传文件的保存路径
            String fileName = filePart.getSubmittedFileName(); // 获取上传文件的原始文件名
            String filePath = uploadDirectory + File.separator + fileName;
            filePart.write(filePath);
// 生成对应的URL
            String url = "http://localhost:8080/mycsdn/img/" + fileName;
            result.put("errno", 0);
            result.put("data", new JSONObject()
                    .fluentPut("url", url)
                    .fluentPut("alt", "图片描述文字")
                    .fluentPut("href", "图片链接"));

            result.put("errno", 1);
            result.put("message", "上传失败信息");


        response.getWriter().write(result.toJSONString());
    }