wangEditor增加源码模式，添加查看源码功能-526互联

wangEditor是一款轻量级的富文本编辑器。使用还比较方便，但是缺少查看源码模式，需要我们自定义一个menu给增加查看源码模式

下面是wangEditor增加源码模式的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>wangEditor增加源码模式</title>
</head>
<body>
    <div id="editor"></div>

    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js"></script>
    <script type="text/javascript">
      const E = window.wangEditor;
      const editor = new E("#editor");
   
      let isHTML = false;

      const { BtnMenu } = E
      class htmlMenu extends BtnMenu {
        constructor(editor) {
          const $elem = E.$(
            `<div class="w-e-menu">
              <button>html</button>
            </div>`
          )
          super($elem, editor)
        }
        clickHandler() {
          let source = editor.txt.html();
          if(source){
            isHTML = !isHTML;
          }
          if(isHTML){
            source = source.replace(/</g, "<").replace(/>/g, ">").replace(/ /g, " ");
          }else{
            source = editor.txt.text().replace(/</ig, "<").replace(/>/ig, ">").replace(/ /ig, " ")
          }
          editor.txt.html(source);
          this.tryChangeActive();
          // console.log(source);
        }
        tryChangeActive() {
            if(isHTML){
                this.active()
            }else{
                this.unActive()
            }
        }
      }


    // 注册菜单
    const menuKey = 'htmlMenuKey' // 菜单 key ，各个菜单不能重复
    editor.menus.extend('htmlMenuKey', htmlMenu)

    // 将菜单加入到 editor.config.menus 中
    // 也可以通过配置 menus 调整菜单的顺序，参考【配置菜单】部分的文档
    editor.config.menus = editor.config.menus.concat(menuKey)

    editor.create()
    </script>
</body>
</html>
此代码亲测可用，直接复制使用即可

源码