富文本編輯

引子

再次碰到須要使用富文本編輯的場景，發現了以前沒有想到的一些點，在此整理一下。

• Origin
• My GitHub

參考點

在使用富文本插件的時候，在比較選擇時，我的發現如下幾個參考點：

• 文檔說明，這個能夠節約不少時間，不管是比較和使用時。
• 國際化，有的真沒有國際化，連文檔也沒有說明。
• 實現列表、連接、標題等各類效果是否使用了原生的 HTML 標籤，其樣式跟自身系統樣式重置是否有衝突，其它顯示編輯後富文本的地方也要考慮。
• 字體的支持，加載額外的字體文件可能加大包的體積。
• 圖片上傳的處理，有的插件須要本身寫。
• 視頻插入的處理，有的插件只是插入一個連接，不一樣的視頻源可能效果會不同。
• 判空，富文本里面可能一開始有默認的標籤，只是看不到，獲取的時候也拿獲得，但其實是沒有輸入內容。
• 初始化、內容改變、獲取/失去焦點事件監聽，嵌入其它框架時有用處。
• 擴展，這個分爲自定義和覆蓋原有功能兩種形式，看實際需求。

關於字體方面，見 Font。

下面就是找到的一些免費開源的富文本插件比較。

插件

如下僅供參考。

Quill

文檔上說，Quill 是一個爲兼容性和可擴展性而構建的所見即所得的現代編輯器。

截至 2019.12.12， 仍然處於有人維護狀態，結合上面的考慮點，有下面的一些我的體會。

好的方面：

• 有獨立的包，大部分功能都不須要額外安裝其它依賴。
• 實現的格式效果，有自身單獨的處理，例如 ul 標籤的樣式。
• 支持部分視頻網站分享連接插入。
• 擴展支持自定義和覆蓋。
• 展現風格簡約。

很差的方面：

• 文檔說明感受不怎麼好用。
• 沒有國際化。
• 圖片異步處理須要單獨重寫處理，沒有提供相應的 API 。
• 工具欄和操做沒有對應的提示信息。

Summernote

文檔上說，Summernote 是一個超級簡單的所見即所得的編輯器。

截至 2019.12.12， 仍然處於有人維護狀態，結合上面的考慮點，有下面的一些我的體會。

好的方面：

• 文檔比較完整好找。
• 事件和方法豐富，包含圖片上傳異步處理 API。
• 支持國際化。
• 工具欄和操做都會有提示信息，並且圖片、表格伴有浮動操做工具。
• 支持部分視頻網站分享連接插入。
• 擴展支持自定義。
• 展現風格簡約。

很差的方面：

• 須要安裝額外的依賴包 JQuery。
• 依賴 Bootstrap 的樣式和部分組件，但不是必需，也有不依賴的版本，若是以爲很差看，須要自行寫額外樣式調整。
• 編輯時的效果使用的是 HTML 標籤原生的效果，例如 H 系列、ul、ol、table 。展現的地方須要重置樣式。

UEditor

文檔上說，UEditor 是所見即所得富文本 web 編輯器，具備輕量，可定製，注重用戶體驗等特色。

已無人維護了，在實際中使用過，主要功能仍是沒有問題的，結合上面的考慮點，有下面的一些我的體會。

好的方面：

• 文檔詳細，由於開發人員也都是國人。
• 獨立的包。
• 支持國際化。
• 實現的格式效果，部分有自身單獨的重置處理。
• 功能很強大且豐富，通常富文本有的都有。
• 草稿本地存儲。
• 擴展支持自定義。

很差的方面：

• 使用時初看像早期編輯器，一些交互的彈窗也很原始。
• 使用的功能越多，配置相對其它插件要複雜一些。

Slate

文檔上說，Slate 是一個徹底可定製的富文本編輯框架。

截至 2019.12.12， 仍然處於有人維護狀態，結合上面的考慮點，有下面的一些我的發現。

好的方面：

• 文檔列出了內部實現的相關屬性和方法，有中文版。
• 獨立的包。
• 實現的格式效果，有自身單獨的重置處理。
• 支持部分視頻網站分享連接插入。
• 選擇內容後支持浮動的操做工具。
• 有對應定製的 react 版本。
• 擴展支持自定義。

很差的方面：

• 無國際化。
• 偏重定製化，想要添加比較多的功能，須要花時間找對應包，看對應包文檔。
• 工具欄的交互跟其它插件有些不同，要先選擇內容再選擇格式纔有效。
• 提供的圖片上傳示例只支持圖片源 URL 的方式。
• react 使用起來，看文檔比較複雜。

參考資料

• 11 Best Rich-Text Editors
• Quill
• Summernote
• UEditor
• Slate