reservation_admin/app/admin/view/article/publish_wangEditor.html

<div class="layui-form-item layui-form-text">
    <label class="layui-form-label">内容</label>
    <div class="layui-input-block">
        <div id="container"></div>
        <textarea name="[field]" id="container1" style="display: none">{notempty name="$[item].[field]"}{$[item]->getData('[field]')}{/notempty}</textarea>
    </div>
</div>

<!-- 配置文件 -->
<script type="text/javascript" src="__PUBLIC__/wangEditor/wangEditor4.min.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
    //https://www.wangeditor.com/
    const E = window.wangEditor
    const editor = new E('#container')
    //防止遮盖下拉框
    editor.config.zIndex = 500;
    //===============================定义图片上传================================//
    editor.config.uploadImgServer = "{:url('attachment/upload')}";
    editor.config.uploadImgMaxSize = '{$web_config.file_size}' * 1024; // 限制大小
//    editor.config.uploadImgAccept = ['jpg']
    editor.config.uploadImgMaxLength = 5 // 一次最多上传 5 个图片
    editor.config.uploadImgParams = {
        use: 'article_content',//自定义 上传参数
    }
    editor.config.uploadImgHeaders = {'X-Requested-With': 'XMLHttpRequest'} //自定义 header
    editor.config.uploadFileName = 'file',//自定义 fileName
        editor.config.uploadImgHooks = {
            // 图片上传并返回了结果，图片插入已成功
            success: function (xhr) {
                console.log('success', xhr)
            },
            // 上传图片超时
            timeout: function (xhr) {
                console.log('timeout')
            },
            // 图片上传并返回了结果，想要自己把图片插入到编辑器中
            // 例如服务器端返回的不是 { errno: 0, data: [...] } 这种格式，可使用 customInsert
            customInsert: function (insertImgFn, result) {
                // result 即服务端返回的接口
                console.log('customInsert', result)
                if (result.code == 1) {
                    // insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
                    insertImgFn(result.data.src)
                }else{
                    alert(result.msg);
                }
            }
        }
    //===============================定义图片上传================================//
    //
    //===============================定义上传视频================================//
    // 配置 server 接口地址
    editor.config.uploadVideoServer = "{:url('attachment/upload')}";
    editor.config.uploadVideoMaxSize = '{$web_config.file_size}' * 1024; // 默认限制视频大小是 1024m ，可以自己修改
    //    editor.config.uploadVideoAccept = ['mp4']
    //考虑到文件较大，所以暂时只允许一个视频上传
    editor.config.uploadVideoParams = {
        use: 'article_content',//自定义 上传参数
    }
    editor.config.uploadVideoHeaders = {
        'X-Requested-With': 'XMLHttpRequest' //自定义 header
    }
    editor.config.uploadVideoName = 'file';//自定义 fileName
    editor.config.uploadVideoTimeout = 1000 * 60 * 5; //timeout 即上传接口等待的最大时间，默认是 5分钟，可以自己修改。
    editor.config.uploadVideoHooks = {
        // 上传视频之前
//        before: function(xhr) {
//            console.log(xhr)
//            // 可阻止视频上传
//            return {
//                prevent: true,
//                msg: '需要提示给用户的错误信息'
//            }
//        },
        // 视频上传并返回了结果，视频插入已成功
        success: function (xhr) {
            console.log('success', xhr)
        },
        // 视频上传并返回了结果，但视频插入时出错了
        fail: function (xhr, editor, resData) {
            console.log('fail', resData)
        },
        // 上传视频出错，一般为 http 请求的错误
        error: function (xhr, editor, resData) {
            console.log('error', xhr, resData)
        },
        // 上传视频超时
        timeout: function (xhr) {
            console.log('timeout')
        },
        // 视频上传并返回了结果，想要自己把视频插入到编辑器中
        // 例如服务器端返回的不是 { errno: 0, data: { url : '.....'} } 这种格式，可使用 customInsert
        customInsert: function (insertVideoFn, result) {
            // result 即服务端返回的接口
            console.log('customInsert', result)
            if (result.code == 1) {
                // insertVideoFn 可把视频插入到编辑器，传入视频 src ，执行函数即可
                insertVideoFn(result.data.src)
            }else{
                alert(result.msg);
            }
        }
    }
    // 自定义插入视频的形式
    //    editor.config.customInsertVideo = function (videoUrl) {
    //        // videoUrl 是返回的视频地址
    //
    //        var thumb = $('#upload_img').attr('src');
    //        // 往编辑器插入 html 内容
    //        editor.cmd.do(
    //            'insertHTML',
    //            '<video src="'+videoUrl+'" poster="'+thumb+'" controls="controls" style="max-width:100%"></video>'
    //        )
    //    }
    //===============================定义上传视频================================//
    //
    //===============================自定义菜单================================//
    //查看源码按钮
    class CustomMenu extends E.BtnMenu {
        constructor(editor_) {
            const $elem = E.$(
                '<div class="w-e-menu" data-title="查看源码"><a href="javaScript:;" id="menu_y" class=""><i class="layui-icon">&#xe64e;</i></a></div>'
            )
            super($elem, editor_)
        }

        // 点击事件
        clickHandler() {
            var editorHtml = editor.txt.html();
            if ($("#menu_y").attr("class") == "active_y") {
                $("#menu_y").attr("class", "")
                editorHtml = editor.txt.text().replace(/&lt;/ig, "<").replace(/&gt;/ig, ">").replace(/&nbsp;/ig, " ");
            } else {
                $("#menu_y").attr("class", "active_y")
                editorHtml = editorHtml.replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/ /g, "&nbsp;");
            }
            editor.txt.html(editorHtml);
//            editor.change && editor.change();
        }

        //激活状态
        tryChangeActive() {
            if ($("#menu_y").attr("class") == "active_y") {
                this.active();//会增加一个 .w-e-active 的 css class
            } else {
                this.unActive();//会删掉 .w-e-active
            }
        }
    }
    // 注册菜单
    const customMenuKey = 'customMenuKey';
    editor.menus.extend('customMenuKey', CustomMenu);
    editor.config.menus = editor.config.menus.concat(customMenuKey);
    //===============================自定义菜单================================//
    //清除格式
    class ClearMenu extends E.BtnMenu {
        constructor(editor_) {
            const $elem = E.$(
                '<div class="w-e-menu" data-title="清除格式"><a href="javaScript:;" id="clear_css" class=""><i class="layui-icon"></i></a></div>'
            )
            super($elem, editor_)
        }

        // 点击事件
        clickHandler(value) {
            var editor = this.editor;
            var isSeleEmpty = editor.selection.isSelectionEmpty();
            var selectionText = editor.selection.getSelectionText();

            if (!isSeleEmpty) {
                editor.cmd.do('insertHTML', selectionText);
            }
        }

        tryChangeActive() {
            //没有激活状态
        }
    }
    // 注册菜单
    const clearMenu = 'clearMenu';
    editor.menus.extend('clearMenu', ClearMenu);
    editor.config.menus = editor.config.menus.concat(clearMenu);
    //===============================自定义菜单================================//
    //实例化
    const $text1 = $('#container1');
    editor.config.onchange = function (html) {
        $text1.val(html)// 第二步，监控变化，同步更新到 textarea
    }
    editor.create()
    editor.txt.html($text1.val()) // 第一步，初始化编辑器内容
</script>
<script>
    //提交表单前调用此函数，还原预览代码
    function beforeSubmit() {
//        console.log('before submit')
        if ($("#menu_y").attr("class") == "active_y") {
            $("#menu_y").attr("class", "")
            var editorHtml = editor.txt.text().replace(/&lt;/ig, "<").replace(/&gt;/ig, ">").replace(/&nbsp;/ig, " ");
            $text1.val(editorHtml);
        }
    }
</script>