主流編輯器對比
| 編輯器 | 授權 | 特點 | 適用場景 |
|---|
| CKEditor 5 | GPL/商業 | 模塊化架構、協同編輯、TypeScript、最佳無障礙 | 企業級 CMS、協同文檔 |
| TinyMCE 6 | LGPL/商業 | 成熟穩定、插件豐富、圖片上傳內建、文檔完善 | 傳統 CMS、SaaS 產品 |
| Quill 2 | BSD | 輕量（~30KB）、現代 API、Delta 格式、易擴展 | 輕量級 Blog、後台管理 |
| UEditor (百度) | MIT | 中文社區活躍、針對中文優化、但已停止維護 | 舊專案維護、內部系統 |
| Editor.js | MIT | 區塊式編輯、輸出 JSON、適合結構化內容 | 知識庫、Notion 風格 |
| Slate / ProseMirror | MIT | 框架級、極高可定製、學習曲線陡峭 | 複雜文檔編輯器自研 |
選型決策樹
- 需協同編輯/即時多人編輯 → CKEditor 5（付費）或 Yjs + Quill/ProseMirror 自研。
- 需成熟穩定、插件市場豐富、預算有限 → TinyMCE 6（免費版足夠）。
- 追求輕量、現代技術棧、輸出 JSON 結構化 → Quill 2 或 Editor.js。
- 中文舊專案維護、不想重構 → UEditor（注意安全漏洞）。
快速整合範例
TinyMCE 6 (CDN)
<textarea id="editor"></textarea>
<script src="https://cdn.tiny.cloud/1/YOUR_API_KEY/tinymce/6/tinymce.min.js"></script>
<script>
tinymce.init({
selector: '#editor',
plugins: 'anchor autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount',
toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline | align | bullist numlist | link image media table | codesample',
height: 400
});
</script>
Quill 2 (CDN)
<div id="editor"></div>
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>
<script>
new Quill('#editor', { theme: 'snow', modules: { toolbar: true } });
</script>
