歡迎光臨我的博客拓跋的前端客棧，這個是原文地址。如果您發(fā)現(xiàn)我文章中存在錯誤，請盡情向我吐槽，大家一起學(xué)習(xí)一起進步φ(>ω<*)

引子

富文本編輯器是我們在生活中非常常用到的編輯工具，現(xiàn)在有很多功能完備且強大的編輯器，比如Quill Rich Text Editor、ueditor等，都是很優(yōu)秀的富文本編輯器。甚至說我們每個人都會用到的word，才是最優(yōu)秀、國民度最高的富文本編輯器。

今天我們要實現(xiàn)一個輕量級的編輯器，主要利用的是document.execCommand。

當(dāng)一個HTML文檔切換到設(shè)計模式(designMode)時，文檔對象暴露 execCommand方法，該方法允許運行命令來操縱可編輯區(qū)域的內(nèi)容。大多數(shù)命令影響文檔的選擇（粗體，斜體等），而其他命令插入新元素（添加鏈接）或影響整行（縮進）。當(dāng)使用 contentEditable時，調(diào)用 execCommand() 將影響當(dāng)前活動的可編輯元素。

用document.execCommand和contentEditable相互配合，就可以實現(xiàn)我們想要實現(xiàn)的功能。

在查閱了execCommand的文檔后，我們決定實現(xiàn)以下功能

1. 選中文字樣式調(diào)整
   • 斜體
   • 粗體
   • 下劃線
   • 刪除線
2. 對齊方式調(diào)整
   • 左對齊
   • 右對齊
   • 居中
   • 兩端對齊
3. 縮進調(diào)整
   • 右縮進
   • 左縮進
4. 列表操作
   • 有序列表
   • 無序列表
5. 上下標
6. 文字操作
   • 全選
   • 復(fù)制
   • 粘貼
7. 基本的字號調(diào)整
8. 基本的顏色調(diào)整
9. 基本的字體調(diào)整
10. undo&redo

實現(xiàn)

說到編輯器，最基本的會分為上下兩部分

• 上部分為控制區(qū)域，用于對文本進行各種控制修改
• 下部分為文本區(qū)域，用于輸入和展示文本的樣式

因此我們可以先在HTML里把兩部分簡單畫出來

<div id="wrapper">
    <div id="control-area"></div>
    <div id="text-area" contenteditable></div>
</div>

注意，既然文本區(qū)域要可編輯，要加上contenteditable屬性，這樣就可以自如的在文本區(qū)域輸入文字了。OK,編輯器雛形已經(jīng)出來了~

接下來要對兩部分分別進行操作，在控制區(qū)域，應(yīng)該就是各種按鈕。參考document.execCommand的語法：

execCommand.png

主要控制到樣式的有兩個api：aCommandName和aValueArgument。同時，命令名aCommandName每條execCommand都會有，aCommandName和aValueArgument。因此我們需要在每個按鈕上傳遞兩個變量。第一個是必填項aCommandName，第二個是選填項aValueArgument。我們考慮采用HTML5的新屬性data-*傳遞這兩個參數(shù):

    <!--調(diào)整為斜體-->
    <a href="#" data-command='italic' onclick="changeStyle(this.dataset)">斜體</a>
    <!--調(diào)整字號為1號-->
    <a href="#" data-command='fontSize' data-value="1" onclick="changeStyle(this.dataset)">1號</a>

上面是兩個基本按鈕示例，一個是不傳參的，一個是傳參的，然后在js端做一個判斷即可實現(xiàn)功能：

    const changeStyle = (data) => {
        //一行核心代碼即可實現(xiàn)基本編輯器功能
        data.value? document.execCommand(data.command, false, data.value):document.execCommand(data.command, false, null)
    }

是不是很簡單呢？

最后，只有兩個按鈕肯定是不夠的，我們要把按鈕數(shù)和編輯器的功能擴充豐富起來。我們就按照第一節(jié)整理的決定要實現(xiàn)的功能列表列出來的功能，按照分類，一一來實現(xiàn)。最后，再把按鈕和文本區(qū)域的樣式美化一下，即可實現(xiàn)我們這個輕量級富文本編輯器啦~

這是我們的預(yù)覽圖：

zEditor.png

大家可以訪問我的博客嘗試一下這個小小富文本編輯器，也希望能去我的github項目上點顆star,謝謝啦~

結(jié)語

實際上，我們這個富文本編輯器是一種最最簡單的實現(xiàn)，僅僅是對contentEditable和document.execCommand進行了一層封裝，所有的樣式實現(xiàn)都是調(diào)用的這同一條api。

在當(dāng)前流行的真正功能強大的富文本編輯器中，基本都是實現(xiàn)了自己的contentEditable，拋棄了對瀏覽器原生的contentEditable特性的依賴。大家都說富文本編輯器是個天坑，事實也正是如此，原生的document.execCommand實現(xiàn)的功能太少，BUG太多，如果使用自己寫的功能來編輯文字，又會破壞contentEditable的undo/redo棧?？傊?，contentEditable最大的特點就是樣式、html語意環(huán)境跟調(diào)用頁面混合在一起，非常容易出現(xiàn)覆蓋現(xiàn)象，而牛逼的富文本編輯器基本上都會使用一套自己的事件監(jiān)聽機制來實現(xiàn)類似contentEditable的功能，這些東西太繁瑣太復(fù)雜，不在這里的討論范圍之內(nèi)了~