歡迎光臨我的博客拓跋的前端客棧砌创，這個是原文地址弛说。如果您發(fā)現(xiàn)我文章中存在錯誤句柠，請盡情向我吐槽冀泻，大家一起學習一起進步φ(>ω<*)
引子
富文本編輯器是我們在生活中非常常用到的編輯工具凛驮，現(xiàn)在有很多功能完備且強大的編輯器裆站，比如Quill Rich Text Editor、ueditor等，都是很優(yōu)秀的富文本編輯器宏胯。甚至說我們每個人都會用到的word羽嫡，才是最優(yōu)秀、國民度最高的富文本編輯器肩袍。
今天我們要實現(xiàn)一個輕量級的編輯器杭棵，主要利用的是document.execCommand。
當一個HTML文檔切換到設計模式(designMode)時氛赐，文檔對象暴露 execCommand方法魂爪，該方法允許運行命令來操縱可編輯區(qū)域的內(nèi)容。大多數(shù)命令影響文檔的選擇（粗體艰管，斜體等）甫窟，而其他命令插入新元素（添加鏈接）或影響整行（縮進）。當使用 contentEditable時蛙婴，調(diào)用 execCommand() 將影響當前活動的可編輯元素粗井。
用document.execCommand和contentEditable相互配合，就可以實現(xiàn)我們想要實現(xiàn)的功能街图。
在查閱了execCommand的文檔后浇衬，我們決定實現(xiàn)以下功能
- 選中文字樣式調(diào)整
- 斜體
- 粗體
- 下劃線
- 刪除線
- 對齊方式調(diào)整
- 左對齊
- 右對齊
- 居中
- 兩端對齊
- 縮進調(diào)整
- 右縮進
- 左縮進
- 列表操作
- 有序列表
- 無序列表
- 上下標
- 文字操作
- 全選
- 復制
- 粘貼
- 基本的字號調(diào)整
- 基本的顏色調(diào)整
- 基本的字體調(diào)整
- 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ū)域蚁阳，應該就是各種按鈕。參考document.execCommand的語法：
主要控制到樣式的有兩個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)我們這個輕量級富文本編輯器啦~
這是我們的預覽圖：
大家可以訪問我的博客嘗試一下這個小小富文本編輯器馒索，也希望能去我的github項目上點顆star,謝謝啦~
結語
實際上，我們這個富文本編輯器是一種最最簡單的實現(xiàn)名船，僅僅是對contentEditable和document.execCommand進行了一層封裝绰上，所有的樣式實現(xiàn)都是調(diào)用的這同一條api。
在當前流行的真正功能強大的富文本編輯器中渠驼，基本都是實現(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的功能，這些東西太繁瑣太復雜瞭亮，不在這里的討論范圍之內(nèi)了~
