WangEditor4 自定义【查看源码】菜单

页面添加css样式：

        .active_y {
            color: #5985ee;
            font-weight: 600;
        }

定义div:

<div id="test_div"></div>

创建并自定义一个【源码】菜单：

//创建编辑器
const E = window.wangEditor;
const editorInfo = new E('#test_div');
// 定义菜单
class CustomMenu extends E.BtnMenu {
    constructor(editor) {
        const $elem = E.$(
            `<div class="w-e-menu">
                <a href="javaScript:;" id="menu_y" class="">源</a>
            </div>`
        )
        super($elem, editor)
    }

    // 【源】点击事件
    clickHandler() {
        var editorHtml = editorInfo.txt.html();
        if ($("#menu_y").attr("class") == "active_y") {
            $("#menu_y").attr("class", "")
            editorHtml = editorInfo.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;");
        }
        editorInfo.txt.html(editorHtml);
        editorInfo.change && editorInfo.change();
    }
    tryChangeActive() {
        this.active();
    }
}
// 注册菜单
const customMenuKey = 'customMenuKey';
editorInfo.menus.extend('customMenuKey', CustomMenu);
editorInfo.config.menus = editorInfo.config.menus.concat(customMenuKey);
editorInfo.create();