一、引言

編輯組件作為 H-ZERO 前端生態中的核心組件之一，其選型直接關係到開發效率和產品質量。面對前端開發中編輯組件的多樣選擇。本文將為您揭示 H-ZERO 項目中編輯組件選型思路，幫助您輕鬆應對選型挑戰！

二、富文本編輯

H-ZERO 前端團隊提供了兩種適用於不同場景的富文本編輯組件：

NewRichTextEditor：基於 Quill 2.x 封裝，具有輕量級、易於擴展，功能全面且適配移動端的特點，對於有跨端需求的場景更推薦使用。

RichTextEditor：基於 CKEditor 4.x 封裝的企業級富文本編輯器，支持多種格式和高級功能。

接下來，給大家分別介紹具體的使用場景：

場景一：評論、回覆類場景

❇ 推薦組件：NewRichTextEditor

• 輕量級：意味着它佔用的前端資源更少。
• license 無限制：允許免費用於個人及商業用途。
• 多端適配性好：能很好地適應不同設備間的屏幕尺寸差異。
• 文件上傳便捷：支持與標準的 H-ZERO 文件服務綁定。
• 自帶預覽組件：可以直接支持富文本預覽。
• 多語言同屏編輯：提供了強大的多語言內容創建能力，允許用户在同一文檔內切換多種語言進行編輯。
• DataSet 雙向綁定：簡化開發流程，還提高了開發效率！

場景二：模板編輯類場景

❇ 推薦組件：RichTextEditor

RichTextEditor 組件在支持 DataSet 雙向數據綁定、多語言編輯 的同時，對於模板編輯類場景具有以下優勢：

• 保留特殊標記與內容保護：可以通過配置使其不自動清理未識別的標籤和屬性，從而保留 #foreach、#end 等模板引擎所需的特殊標記符。
• 源碼視圖增強控制：內置的源碼視圖功能，允許開發者直接查看並編輯生成的 HTML 代碼。這對於需要對模板進行精細控制的情況非常有用，比如調整樣式、添加額外的數據屬性等。
• 版本安全性兼容：已處理 CKEditor 4.x 低版本的安全性問題。

注意事項
1、移動端的使用效果不佳，更適用於 PC 端的使用場景。
2、功能使用受限，因為 license 限制，無法升級到 CKEditor 5.x。

三、代碼編輯

隨着業務需求的擴展，各產品對在線代碼編輯功能的需求也在日益增長。接下來，我們將介紹在H-ZERO平台中，在不同代碼編輯場景下的使用情況。

場景一：代碼配置類場景

比如：儀表板組件支持 JSON 格式的代碼片段配置，如下圖所示

❇ 推薦組件：CodeMirror

• 輕量：瀏覽器加載前端資源更少。
• 支持語法高亮：比如：JSON、yaml、html 等。
• 自動代碼格式化：自帶的格式化功能可以自動調整代碼佈局，減少了因格式錯誤而引發的問題。

場景二：代碼開發、調試類場景

比如：飛搭的前端自定義腳本功能

❇ 推薦組件：Monaco Editor

注意事項
1、代碼智能提示需要開發者根據實際情況去自行定製。
2、斷點調試能力沒有提供標準服務，如有需求可以聯繫飛搭產品同事進行交流

綜上所述，建議各業務團隊根據實際業務需求進行編輯類組件選型。如有疑問，可在開放平台提交諮詢工單進行反饋。

歡迎試用

我們將持續優化增強編輯組件，優化客户體驗。如果你有更好的想法和建議，歡迎您積極反饋給我們。

● NewRichTextEditor 使用文檔

● RichTextEditor 使用文檔

● 幫助與反饋