layui中应用wangEditor5

一、产生原因：

       之前的富文本用的layui自带的layedit.js，客户要求参照word格式，实现图片编辑，换成另一种富文本wangEditor5。

二、方法：

      1.官网链接：wangEditor

       2. 页面引入 css和js

       3.html部分:

            <div class='layui-form-item editorClass' id="editorContent">
                    <div class="layui-form-item">
                        <label class="layui-form-label">内容</label>
                        <div class="layui-input-block">
                            <div id="editor—wrapper">
                                    <div id="toolbar-container"></div>
                                    <div id="editor-container"></div>
                                </div>
                        </div>
                     </div>
               </div>

         4.js部分：

           
        $(function(){
            const { createEditor, createToolbar } = window.wangEditor;
            var  contentWangEditor = " ";
            const editorConfig = {
                placeholder: '请编辑图文',
                MENU_CONF:{
                     uploadImage:{
                        server:'上传图片的接口(后端提供)',
                        hooks:{
                            success:function(xhr,editor,result){
                                const style = document.createElement("style");
                                style.innerHTML = `p > img { display: block; margin: 0; padding: 0; }`;
                                document.head.appendChild(style);
                            }
                        },
                      
                        headers:{
                           "Authorization":Authorization值,
                           "Content-Type":"multipart/form-data; boundary=MyBoundary"
                        },
                        customInsert(res,insertFn){
                            insertFn(res.data.src,res.data.title);
                           
                        },
                        async customUpload(file, insertFn) {   
                            // JS 语法
                            let formData = new FormData();
                            for(var i = 0;i < file.length;i ++) {
                                formData.append("file", file[0]);
                            }
                            formData.append("file", file);
                            $.ajax({
                                url: "上传图片的接口(后端提供)",
                                type: "POST",
                                data: formData,
                                dataType:"json",
                                'Content-Type': 'application/x-www-form-urlencoded',
                                async: false,
                                cache: false,
                                contentType: false,
                                processData: false,
                                headers: {
                                    Authorization: Authorization值,
                                },
                                success:function(da){
                                    if(da.code == 0){
                                        insertFn("域名地址"+da.data.src);
                                       
                                    }else{
                                        return;
                                    }
                                }
                            });
                        }
                        
                     }
                },
                showLinkImg:false,
                uploadVideo:false,
                onChange(editor) {
                    contentWangEditor = editor.getHtml();//获取富文本的内容
                   
                },
        };
        
        const editor = createEditor({
            selector: '#editor-container',
            html: '<p><br></p>',
            config: editorConfig,
            mode: 'default', // or 'simple'
        });

        const toolbarConfig = {};
        toolbarConfig.excludeKeys = [
            'group-video',
            'insertImage'
        ];
        const toolbar = createToolbar({
            editor,
            selector: '#toolbar-container',
            config: toolbarConfig,
            mode: 'default', // or 'simple'
        });    
        })