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

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

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

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

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

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

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

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。