Demo: https://ma125120.github.io/ma-dom/test/exec.html（僅提供參考，實(shí)現(xiàn)了富文本編輯器的基礎(chǔ)功能，如有完善需要，可自行拓展或者在下方評論，提出您珍貴的意見）。

前幾天項(xiàng)目中需要使用富文本編輯器，看了看github流行的富文本編輯器，體積都偏大，由于公司服務(wù)器的帶寬有限，所以就只能自己實(shí)現(xiàn)一個簡易的富文本編輯器了。

該方法的重點(diǎn)就是 document.execCommand 和 html5的contenteditable 全局屬性（其實(shí)document.designMode也可以達(dá)到效果，但是我覺得還是contenteditable比較更好用，你看github上的那些富文本編輯器，基本上都是帶有contenteditable屬性的div元素制作而成的）。

document.execCommand這個方法是針對文檔中的被選擇文本進(jìn)行操作，那么哪些元素是可以視為有效的被選擇文本呢？

分別是 HTML文檔切換到設(shè)計(jì)模式 designMode或是使用contentEditable屬性的元素，input輸入框和textarea也是可以的，但是這種文本框使用document.execCommand時會受到許多的限制，畢竟文本框的值只能為字符串，所以很多針對文本的格式化方法是不值得。

當(dāng)選擇文本后，只要調(diào)用document.execCommand方法傳入相應(yīng)的參數(shù)，即可對文本進(jìn)行格式化，具體支持的操作可自行前往 mdn 或者上方的鏈接進(jìn)行查閱。注意：在火狐瀏覽器中使用時，第二個參數(shù)必須為false,否則該函數(shù)會執(zhí)行失敗，切記切記。

還有一點(diǎn)需要注意的是：選擇文本后，觸發(fā)document.execCommand方法執(zhí)行的綁定元素最好是button或者img元素，最后不要使用其他元素如div，因?yàn)樵赿iv等元素上點(diǎn)擊時，文檔中的被選擇區(qū)域就會變成你點(diǎn)擊的元素本身，也就是發(fā)生了選區(qū)丟失的問題。雖然可以通過在元素上使用 user-select: none;屬性來避免選區(qū)丟失的問題，但是這種方法存在瀏覽器兼容性問題，比如搜狗瀏覽器就不支持。

在該Demo中使用事件監(jiān)聽的方式，對具有exec類的元素進(jìn)行了監(jiān)聽，當(dāng)點(diǎn)擊該元素時，就會使用該元素的data-exec和data-exec2屬性的值作為document.execCommand方法的第一個參數(shù)和第三個參數(shù)，從而實(shí)現(xiàn)對文本的格式化。
需要在項(xiàng)目中實(shí)際應(yīng)用的話，也特別簡單，只需要使用我的 那個 事件監(jiān)聽函數(shù)，然后在文檔中添加一個具有contenteditable屬性的div元素，具有data-exec屬性和exec類的button即可。

github地址： https://github.com/ma125120/ma-dom/tree/master/test。

總結(jié)

以上是生活随笔為你收集整理的轻松实现富文本编辑器的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。