專案需整合富文本編輯器,希望能像百度 UEditor 這樣功能完整,但又能靈活移除不需要的按鈕(如插入影片、程式碼高亮等),並尋找配套教學資源上手快的方案。
UEditor 官方文件提供 toolbars 設定陣列,可精確控制顯示哪些按鈕:
var ue = UE.getEditor('editor', {
toolbars: [[
'source', '|', 'undo', 'redo', '|',
'bold', 'italic', 'underline', 'strikethrough', '|',
'forecolor', 'backcolor', '|',
'justifyleft', 'justifycenter', 'justifyright', '|',
'insertorderedlist', 'insertunorderedlist', '|',
'link', 'unlink', '|',
'image', 'simpleupload'
]],
// 其他設定...
});
只需在陣列中保留需要的按鈕識別字串,即可實現「精簡版」編輯器。完整按鈕清單請參考官方文件「工具列配置」章節。
| 編輯器 | 特色 | 教學資源 | 適用場景 |
|---|---|---|---|
| Quill | 模組化架構、輕量(~20KB gzip)、原生支援 Delta 格式、無 jQuery 依賴 | 官方文件完整、中文社區教學多 | 現代 SPA、需高度客製化工具列 |
| TinyMCE 5/6 | 功能最完整、相容性佳、付費版有圖片上傳、拼字檢查等企業級功能 | 官方範例豐富、中文部落格教學多 | 傳統 CMS、企業級後台、需相容舊瀏覽器 |
| Editor.js | 區塊式編輯、輸出結構化 JSON、擴充性極高 | GitHub Wiki、國外技術部落格 | 內容需結構化儲存、多平台發布 |
| WangEditor (v5+) | 國產、中文文件完善、支援 Vue/React、體積適中 | 官網教學、掘金/CSDN 實戰文章多 | 國內專案、需快速上手、團隊偏好中文文件 |
toolbars 精簡,成本最低。https://fex.baidu.com/ueditor/#start-confighttps://quilljs.com/playground/https://www.wangeditor.com/百度 UEditor 透過 toolbars 陣列即可輕鬆自訂功能;若重新選型,建議根據專案屬性從 Quill、TinyMCE、Editor.js、WangEditor 中挑選,並善用官方 Playground 與中文社區教學快速落地。