为富文本编辑器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) }