refactor(editor): 重构富文本编辑器的图片上传功能

KKSU

2024-11-28 89d1c74f1b0ecc51776a85bfb1777f02e4c72a4b

refactor(editor): 重构富文本编辑器的图片上传功能

- 替换原有的 E.createEditor 和 E.createToolbar 方法，使用新的 E 对象初始化方式
- 实现自定义图片上传逻辑，支持多图上传
- 优化代码结构，提高可读性和可维护性
- 注释掉旧的代码实现，保留作为参考

 src/main/resources/templates/febs/views/modules/score/goodsUpdate.html

@@ -151,15 +151,42 @@
            elem: '#febs-form-group-date'
        });

        var E = window.wangEditor;
        const editorConfig = { MENU_CONF: {} };
        editorConfig.MENU_CONF['uploadImage'] = {
            server: '/admin/goods/uploadFileBase64',
            fieldName : "file",
            customInsert(res, insertFn) {
                insertFn(res.data.src, res.data.title, '')
            },
        }
        const E = window.wangEditor;
        const editor = new E('#toolbar-container', '#text-container'); // 传入两个元素
        editor.config.showLinkImg = false;
        editor.config.uploadFileName = 'file';
        editor.config.customUploadImg = function (files, insertImgFn) {
            // files 是 input 中选中的文件列表
            // insertImgFn 是获取图片 url 后，插入到编辑器的方法
            // 上传图片，返回结果，将图片插入到编辑器中
            for (let i = 0; i < files.length; i++){
                var form = new FormData();
                form.append("file", files[0]);
                $.ajax({
                    url:'/admin/goods/uploadFileBase64',
                    type: "post",
                    processData: false,
                    contentType: false,
                    data: form,
                    dataType: 'json',
                    success(res) {
                        // 上传代码返回结果之后，将图片插入到编辑器中
                        insertImgFn(res.data.src, res.data.title, '')
                    }
                })
            }
        };
        editor.create();

        // var E = window.wangEditor;
        // const editorConfig = { MENU_CONF: {} };
        // editorConfig.MENU_CONF['uploadImage'] = {
        //     server: '/admin/goods/uploadFileBase64',
        //     fieldName : "file",
        //     customInsert(res, insertFn) {
        //         insertFn(res.data.src, res.data.title, '')
        //     },
        // }

        //普通图片上传
        upload.render({
@@ -259,18 +286,20 @@

            $('#demo2').append('<img src="' + goodsInfo.thumb + '" alt="" class="layui-upload-img" style="width: 100px">')

            window.editor = E.createEditor({
                html: goodsInfo.goodsDetails,
                selector: '#editor-container',
                config : editorConfig,
                mode: 'default'
            });
            // window.editor = E.createEditor({
            //     html: goodsInfo.goodsDetails,
            //     selector: '#editor-container',
            //     config : editorConfig,
            //     mode: 'default'
            // });
            //
            // window.toolbar = E.createToolbar({
            //     editor,
            //     selector: '#toolbar-container',
            //     mode: 'default'
            // });

            window.toolbar = E.createToolbar({
                editor,
                selector: '#toolbar-container',
                mode: 'default'
            });
            editor.txt.html(goodsInfo.goodsDetails);
        }

        form.on('submit(score-goods-update-form-submit)', function (data) {