wangEditor 富文本编辑器

wangEditor 富文本编辑器

效果如下：

代码：

<div id="fdEmailContext" style="width: 99%;">div>

导入

<script type="text/javascript" src="../wangEditor/wangEditor.min.js">script>

javascript

 const E = window.wangEditor
    const editor = new E("#fdEmailContext")
    editor.config.height = 500;
    editor.config.zIndex = 500;
    editor.config.placeholder = '请输入。。。';
    editor.config.focus = true;
    editor.config.uploadImgMaxSize = 2 * 1024 * 1024 // 2M 默认限制图片大小是 5M ，可以自己修改。
    editor.config.uploadImgAccept = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'];
    editor.config.uploadImgMaxLength = 5; // 一次最多上传 5 个图片
    editor.config.uploadImgServer = 'http://127.0.0.1:8080/uploadImgFile'; // 上传图片的接口地址
    editor.config.debug = true; // 开启debug模式   
    editor.config.uploadFileName = 'file'; // formdata中的name属性

    // 默认情况下，显示所有菜单
    editor.config.menus = [
            'head',
            'bold',
            'fontSize',
            'fontName',
            'italic',
            'underline',
            'strikeThrough',
            'indent',
            'lineHeight',
            //'foreColor',
            'backColor',
            'link',
            'list',
            'todo',
            'justify',
            'quote',
            'emoticon',
            'image',
            //'video',
            //'table',
            'code',
            'splitLine',
            'undo',
            'redo',
        ]
        // 或者 const editor = new E(document.getElementById('div1'))
    editor.create()
        // if (PageData.flowExamine.fdEmailContext != null && isJSON(PageData.flowExamine.fdEmailContext)) {
        //     editor.txt.setJSON(JSON.parse(PageData.flowExamine.fdEmailContext))
        // }
    editor.config.uploadImgHooks = {
        before: function(xhr, editor, files) {
            let formdata = new FormData();
            for (let i = 0; i < files.length; i++) {
                let url = files[i];
                formdata.append('file[]', url)
            }
        },
        customInsert: function(insertImg, result, editor) {
            for (let i = 0; i < result.data.length; i++) {
                let url = result.data[i]
                insertImg(url)
            }
        },
        // 图片上传并返回结果，但图片插入错误时触发
        fail: function(xhr, editor, result) {
            console.log(result)
        },
        success: function(xhr, editor, result) {
            // 图片上传并返回结果，图片插入成功之后触发
            console.log(result, 'success')
        }
    }

    editor.config.onchange = function(html) {
        PageData.flowExamine.fdEmailContext = html // urlencode(JSON.stringify(editor.txt.getJSON()))
    }
 

但是设置字体颜色和表格的话提交后java后端提交有问题，我这边有时候提交后端取到的是null