wangeditor富文本编辑器上传图片

前端配置MENU_CONF很重要!!!

<script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
    <script>
        const {createEditor, createToolbar} = window.wangEditor

        const editorConfig = {
            placeholder: 'Type here...',
            onChange(editor) {
                const html = editor.getHtml()
                console.log('editor content', html)
                // 同步到隐藏的 <textarea>
                $('#id_content').val(html)  // document.getElementById('id_content').value = html
            },
            // 菜单配置,这个必须要写
            MENU_CONF: {},  // 菜单配置,这个必须要写
        };
        editorConfig.MENU_CONF['uploadImage'] = {
            server: '/upload_image/',
            fieldName: 'image',
            headers: {
                'X-CSRFToken': '{{ csrf_token }}'  // 传递CSRF Token
            },
            onBeforeUpload(file) {    // JS 语法
                // file 选中的文件,格式如 { key: file }
                return file
            },

            // 上传进度的回调函数
            onProgress(progress) {       // JS 语法
                // progress 是 0-100 的数字
                console.log('progress', progress)
            },

            // 单个文件上传成功之后
            onSuccess(file, res) {          // JS 语法
                console.log(`${file.name} 上传成功`, res)
            },

            // 单个文件上传失败
            onFailed(file, res) {           // JS 语法
                console.log(`${file.name} 上传失败`, res)
            },

            // 上传错误,或者触发 timeout 超时
            onError(file, err, res) {               // JS 语法
                console.log(`${file.name} 上传出错`, err, res)
            },
        }

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


        const toolbarConfig = {}

        const toolbar = createToolbar({
            editor,
            selector: '#toolbar-container',
            config: toolbarConfig,
            mode: 'default', // or 'simple'
        })
    </script>
posted @ 2025-06-11 15:08  _yessir  阅读(238)  评论(0)    收藏  举报