wangEditor上传图片（jquery代码)

wangEditor上传图片（jquery代码)

2023.3.16

---

这是官网所给出的快速上手和图片上传

说实话我没学过ts我确实看不懂，引用了半天也没找到该怎么引用，所以在弄好后直接备份一份，以防以后会用

    const { createEditor, createToolbar } = window.wangEditor

    const editorConfig = {
        placeholder: 'Type here...',
        
        //-----------------------------------------------------------------
        MENU_CONF: {
            // 配置上传图片
            uploadImage: {

                //server必须要配置正确
                server: "/upload",

                maxFileSize: 4 * 1024 * 1024, // 1M
                // 最多可上传几个文件，默认为 100
                maxNumberOfFiles: 10,
                // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
                allowedFileTypes: [],
                // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
                fieldName: "file",
                meta: {
                    //官网中把token放到了这里，但是请求的时候会看不到token
                },
                headers: {
                    //所以token放这里
                    token: window.sessionStorage.token,
                },
                // 将 meta 拼接到 url 参数中，默认 false
                metaWithUrl: false,
                // 跨域是否传递 cookie ，默认为 false
                withCredentials: false,
                // 超时时间，默认为 10 秒
                timeout: 5 * 1000, // 5 秒
                customInsert(res, insertFn) {
                    // JS 语法
                    // res 即服务端的返回结果
                    // 从 res 中找到 url alt href ，然后插图图片
                    if (res.code > 0) {
                        return layui.layer.msg('上传失败')
                    }
                    insertFn(res.data);
                    layui.layer.msg('上传完毕', {icon: 1});
                },
            },
        },
        //-----------------------------------------------------------------
        
        onChange(editor) {
            const html = editor.getHtml()
            $('#content').val(html)
            // 也可以同步到 <textarea>
        }
    }

    const editor = createEditor({
        selector: '#editor-container',
        html: val,
        config: editorConfig,
        mode: 'default', // or 'simple'
    })

    const toolbarConfig = {
        excludeKeys: ["group-video"]
    }

    const toolbar = createToolbar({
        editor,
        selector: '#toolbar-container',
        config: toolbarConfig,
        mode: 'default', // or 'simple'
    })