歡迎光臨我的博客拓跋的前端客棧，這個(gè)是原文地址。如果您發(fā)現(xiàn)我文章中存在錯(cuò)誤，請盡情向我吐槽，大家一起學(xué)習(xí)一起進(jìn)步φ(>ω<*)
引子
富文本編輯器是我們在生活中非常常用到的編輯工具，現(xiàn)在有很多功能完備且強(qiáng)大的編輯器，比如Quill Rich Text Editor、ueditor等，都是很優(yōu)秀的富文本編輯器。甚至說我們每個(gè)人都會(huì)用到的word，才是最優(yōu)秀、國民度最高的富文本編輯器。
今天我們要實(shí)現(xiàn)一個(gè)輕量級的編輯器，主要利用的是document.execCommand。
當(dāng)一個(gè)HTML文檔切換到設(shè)計(jì)模式(designMode)時(shí)，文檔對象暴露 execCommand方法，該方法允許運(yùn)行命令來操縱可編輯區(qū)域的內(nèi)容。大多數(shù)命令影響文檔的選擇（粗體，斜體等），而其他命令插入新元素（添加鏈接）或影響整行（縮進(jìn)）。當(dāng)使用 contentEditable時(shí)，調(diào)用 execCommand() 將影響當(dāng)前活動(dòng)的可編輯元素。
用document.execCommand和contentEditable相互配合，就可以實(shí)現(xiàn)我們想要實(shí)現(xiàn)的功能。
在查閱了execCommand的文檔后，我們決定實(shí)現(xiàn)以下功能
- 選中文字樣式調(diào)整
- 斜體
- 粗體
- 下劃線
- 刪除線
- 對齊方式調(diào)整
- 左對齊
- 右對齊
- 居中
- 兩端對齊
- 縮進(jìn)調(diào)整
- 右縮進(jìn)
- 左縮進(jìn)
- 列表操作
- 有序列表
- 無序列表
- 上下標(biāo)
- 文字操作
- 全選
- 復(fù)制
- 粘貼
- 基本的字號調(diào)整
- 基本的顏色調(diào)整
- 基本的字體調(diào)整
- undo&redo
實(shí)現(xiàn)
說到編輯器，最基本的會(huì)分為上下兩部分
- 上部分為控制區(qū)域，用于對文本進(jìn)行各種控制修改
- 下部分為文本區(qū)域，用于輸入和展示文本的樣式
因此我們可以先在HTML里把兩部分簡單畫出來
<div id="wrapper">
<div id="control-area"></div>
<div id="text-area" contenteditable></div>
</div>
注意，既然文本區(qū)域要可編輯，要加上contenteditable屬性，這樣就可以自如的在文本區(qū)域輸入文字了。OK,編輯器雛形已經(jīng)出來了~
接下來要對兩部分分別進(jìn)行操作，在控制區(qū)域，應(yīng)該就是各種按鈕。參考document.execCommand的語法：
主要控制到樣式的有兩個(gè)api：aCommandName和aValueArgument。同時(shí)，命令名aCommandName每條execCommand都會(huì)有，aCommandName和aValueArgument。因此我們需要在每個(gè)按鈕上傳遞兩個(gè)變量。第一個(gè)是必填項(xiàng)aCommandName，第二個(gè)是選填項(xiàng)aValueArgument。我們考慮采用HTML5的新屬性data-*傳遞這兩個(gè)參數(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>
上面是兩個(gè)基本按鈕示例，一個(gè)是不傳參的，一個(gè)是傳參的，然后在js端做一個(gè)判斷即可實(shí)現(xiàn)功能：
const changeStyle = (data) => {
//一行核心代碼即可實(shí)現(xiàn)基本編輯器功能
data.value? document.execCommand(data.command, false, data.value):document.execCommand(data.command, false, null)
}
是不是很簡單呢？
最后，只有兩個(gè)按鈕肯定是不夠的，我們要把按鈕數(shù)和編輯器的功能擴(kuò)充豐富起來。我們就按照第一節(jié)整理的決定要實(shí)現(xiàn)的功能列表列出來的功能，按照分類，一一來實(shí)現(xiàn)。最后，再把按鈕和文本區(qū)域的樣式美化一下，即可實(shí)現(xiàn)我們這個(gè)輕量級富文本編輯器啦~
這是我們的預(yù)覽圖：
大家可以訪問我的博客嘗試一下這個(gè)小小富文本編輯器，也希望能去我的github項(xiàng)目上點(diǎn)顆star,謝謝啦~
結(jié)語
實(shí)際上，我們這個(gè)富文本編輯器是一種最最簡單的實(shí)現(xiàn)，僅僅是對contentEditable和document.execCommand進(jìn)行了一層封裝，所有的樣式實(shí)現(xiàn)都是調(diào)用的這同一條api。
在當(dāng)前流行的真正功能強(qiáng)大的富文本編輯器中，基本都是實(shí)現(xiàn)了自己的contentEditable，拋棄了對瀏覽器原生的contentEditable特性的依賴。大家都說富文本編輯器是個(gè)天坑，事實(shí)也正是如此，原生的document.execCommand實(shí)現(xiàn)的功能太少，BUG太多，如果使用自己寫的功能來編輯文字，又會(huì)破壞contentEditable的undo/redo棧。總之，contentEditable最大的特點(diǎn)就是樣式、html語意環(huán)境跟調(diào)用頁面混合在一起，非常容易出現(xiàn)覆蓋現(xiàn)象，而牛逼的富文本編輯器基本上都會(huì)使用一套自己的事件監(jiān)聽機(jī)制來實(shí)現(xiàn)類似contentEditable的功能，這些東西太繁瑣太復(fù)雜，不在這里的討論范圍之內(nèi)了~
