富文本 —— wangEditor

姍姍來遲的富文本

前序：

• 當前文檔展示的解決方案之一
• 在這什麼都想網頁展示的年代，dom元素承擔了偏離它初衷的負擔
• 選擇這個富文本，皆因 Simple Job Simple App
• wangEditor官網
• 當前版本 v 3.1.1
• 源碼很多註釋，但是說真的還是2.X版本比較接地氣，3.X從源碼這些封裝來說是好了很多，但是面向開發者，總是少了點味道
• 本文不作wangEditor基礎使用介紹等等，僅爲自己遇到的一些問題的彙總，慎看

一：wangEditor 3.X 的插件擴展方法：

• 這裏採用直接修改源代碼的做法，當然看懂了，你也可以外部封裝，但是想不改動源碼目前是想不出其他方法，即使有，但我覺得要是內部不開放接口，這麼搞實在沒意義，故下面僅供參考，做法過於幼稚，請勿下飯
• 修改壓縮包release文件下的 wangEditor.js，至於改完要不要壓縮自行選擇
• 新增菜單插件 — 首項縮進 Indent

/*
menu - indent
*/
// 構造函數
function Indent(editor) {
    this.editor = editor;
     // 設置菜單的樣式，文本，title僅爲懸浮時顯示名稱，各位客官可看需添加
    this.$elem = $('<div class="w-e-menu" title="首行縮進"><i class="w-e-icon-indent-right"></i></div>');
    // 設置操作方式爲點擊還是選項面板
    this.type = 'click';

    // 當前是否 active 狀態
    this._active  = false;
}

// 原型
Indent.prototype = {
    constructor: Indent,
   // 設置點擊事件
    onClick: function onClick(e) {
    // 這裏必須要注意，在純文本沒有外部元素包裹的時候，這裏會把純文本的父元素獲取，
    // 故後面設置的就往往不是你想要的，需要約定俗成，任意一行內容均需要一個元素包裹，  
    // 以便樣式控制影響所在行，若想測試這種效果，請使用
    // editor.txt.html('純文本內容') 、
    // editor.txt.html('<p>帶元素的內容</p>') 分別試下
        var $selectionElem = this.editor.selection.getSelectionContainerElem();

    // 這裏僅僅使用dom的縮進操作，至於精準的按當前字體大小以及設置縮進單位的，請自行研究
        $($selectionElem).css('text-indent', '2em');
    },
   // 設置菜單切換狀態
    tryChangeActive: function tryChangeActive(e) {
        var editor = this.editor;
        var $elem = this.$elem ;
        if (editor.cmd.queryCommandState('indent')) {
            this._active = true;
            $elem.addClass('w-e-active');
        } else {
            this._active = false;
            $elem.removeClass('w-e-active');
        }
    }
};

• 將插件 Indent 註冊到菜單容器

MenuConstructors.indent = Indent;

• 修改內置css文件，添加修改後的字體圖標

// 覆蓋還是修改取決於你自己，要是懶得找，可以外置這些字體設置，畢竟是樣式定位
// 需要注意，內置css的 \ 轉移符
// 修改的字體base64格式文本，後面省略，具體的看你拿到的字體轉換後的base64爲準
// 字體格式這邊選擇woff2，已跟原版不同，具體看自己選擇
// 此處僅展示所在位置
@font-face {  font-family: \'w-e-icon\';  src: url(data:application/font-woff2;charset=utf-8;base64...)format(\'woff2\');  font-weight: normal;  font-style: normal;}

// 新增首項縮進的樣式，樣式代碼也來自實際字體編號，切勿直接CV
.w-e-icon-indent-right:before {  content: "\\e80f";}

二：保存後的富文本標籤顯示的解決方法：

• 當你嘗試editor.txt.html發覺顯示爲帶標籤元素的文本時，那說明內容中特殊符號經過了轉移，所以流程是先把已轉義的符號改回正常的符號，在html化，網上找到的是其實是瀏覽器轉移好的文本，再把文本取出給editor.txt.html，如下：

let box = document.createElement("div");
box .innerHTML = text;
editor.txt.html(box .innerText || box .textContent);