為富文本編輯器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) }