为富文本编辑器wangEditor添加源码模式

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

一、快速扩展一个菜单

　　【注意】以 Button 菜单为例演示，官方文档里有其他类型的菜单，注册步骤都是一样的。

1、准备

// 引入 wangEditor
import E from 'wangeditor' // npm 安装
// const E = window.wangEditor // CDN 引入的方式

// 获取必要的变量，这些在下文中都会用到
const { $, BtnMenu, DropListMenu, PanelMenu, DropList, Panel, Tooltip } = E

// 【注意】如果版本 <= v4.0.5 需要这样写：
// const { $ } = E
// const { BtnMenu, DropListMenu, PanelMenu, DropList, Panel, Tooltip } = E.menuConstructors

2、菜单class

// 第一，菜单 class ，Button 菜单继承 BtnMenu class
class AlertMenu extends BtnMenu {
    constructor(editor) {
        const $elem = E.$(
            `<div class="w-e-menu">
                <button>alert</button>
            </div>`
        )
        super($elem, editor)
    }
    // 菜单点击事件
    clickHandler() {
        // 做任何你想做的事情
        // 可参考【常用 API】文档，来操作编辑器
        alert('hello world')
    }
    // 菜单是否被激活（如果不需要，这个函数可以空着）
    // 1. 激活是什么？光标放在一段加粗、下划线的文本时，菜单栏里的 B 和 U 被激活，如下图
    // 2. 什么时候执行这个函数？每次编辑器区域的选区变化（如鼠标操作、键盘操作等），都会触发各个菜单的 tryChangeActive 函数，重新计算菜单的激活状态
    tryChangeActive() {
        // 激活菜单
        // 1. 菜单 DOM 节点会增加一个 .w-e-active 的 css class
        // 2. this.this.isActive === true
        this.active()
        // // 取消激活菜单
        // // 1. 菜单 DOM 节点会删掉 .w-e-active
        // // 2. this.this.isActive === false
        // this.unActive()
    }
}

3、注册菜单

const editor = new E('#div1')

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

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

// 注册完菜单，再创建编辑器，顺序很重要！！！
editor.create()

二、增加查看源码模式

　　经过以上三步的话，那么工具栏上就有我们加的菜单了，那么如何实现源码模式呢？

　　在clickHandler里去操作editor，然后利用editor.txt.html() 设置展示值

      let _this = this
      const E = window.wangEditor
      const { $, BtnMenu } = E
      class AlertMenu extends BtnMenu {
        constructor(editor) {
          const $elem = E.$(
            `<div class="w-e-menu">
              <i class="nb-html"></i>
            </div>`
          )
          super($elem, editor)
        }
        clickHandler() {
          _this.showSource()
          this.tryChangeActive()
        }
        tryChangeActive() {
          if (_this.isHTML) this.active()
          else this.unActive()
        }
      }

    showSource () {
      let _this = this
      let _editor = _this.editor
      _this.isHTML = !_this.isHTML
      let _source = _editor.txt.html()
      if (_this.isHTML) {
        _source = _source.replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/ /g, "&nbsp;")
      } else {
        _source = _editor.txt.text().replace(/&lt;/ig, "<").replace(/&gt;/ig, ">").replace(/&nbsp;/ig, " ")
      }
      _editor.txt.html(_source)
    }