| 編輯器 | 現狀 | 授權 | 核心優勢 | 主要缺點 | 建議場景 |
|---|
| eWebEditor |
停止更新（最後 v3.8，2010 年前） |
商業/免費版 |
早期國產代表、Word/Excel 匯入、多語言、多平台版本（ASP/PHP/JSP/ASP.NET） |
代碼老舊、IE 專屬機制多、無現代框架整合、安全風險高 |
僅維護極舊專案，新專案不建議 |
| FCKEditor |
已更名為 CKEditor 3+，2.x 停止維護 |
GPL/LGPL/MP |
開創 Web WYSIWYG 先河、插件架構、社群龐大 |
2.x 架構落後、核心重構導致插件不兼容 |
歷史專案遷移至 CKEditor 4/5 |
| CKEditor 4 |
長期支援（LTS），2023 年進入僅維護安全修補 |
GPL/LGPL/MP/商業 |
成熟穩定、豐富插件、Widget 系統、輸出可控、支援 IE11+ |
架構較重、現代框架整合需額外包裝 |
現有專案穩定運行、需 IE11 支援 |
| CKEditor 5 |
活躍開發中（最新 v40+） |
GPL/商業 |
全新架構（MVC、操作轉換/CRDT）、即時協作、模組化打包、TypeScript 原生、React/Vue/Angular 官方整合 |
學習曲線陡、自定義需懂模型/Schema、商業功能收費 |
新專案首選、協作編輯、現代前端技術棧 |
| TinyMCE 5/6 |
活躍開發中 |
LGPL/商業 |
輕量核心、插件化、雲端圖片上傳服務、優秀文檔、React/Vue/Svelte 整合包、開箱即用 |
部分進階功能（拼寫檢查、無障礙檢查、導出 PDF）需商業授權 |
快速集成、靈活配置、中小團隊首選 |
| 方案 | 說明 |
|---|
| 內建上傳插件 | CKEditor `SimpleUploadAdapter`、TinyMCE `images_upload_handler`，回呼函數處理上傳邏輯 |
| 雲端服務 | CKEditor Cloud Services、TinyMCE Cloud（付費），自動處理圖片優化、CDN、權限 |
| 自建介面 | 前端上傳至後端 API → 返回 URL → 編輯器插入 ` `，完全可控 |
3. 現代前端框架整合
<script setup>
import { ClassicEditor } from '@ckeditor/ckeditor5-build-classic';
import { useEditor } from '@ckeditor/ckeditor5-vue';
const editor = useEditor(ClassicEditor);
</script>
<template>
<ckeditor :editor="editor" v-model="content" />
</template>
import { Editor } from '@tinymce/tinymce-react';
<Editor
init={{
plugins: 'lists link image table code help wordcount',
toolbar: 'undo redo | blocks | bold italic | alignleft aligncenter | bullist numlist | link image | code',
images_upload_handler: async (blob, succ, fail) => { /* 上傳邏輯 */ }
}}
value={content}
onChange={(e) => setContent(e.target.getContent())}
/>
4. 效能與體積
- TinyMCE 核心 ~50KB (gzipped)，按需載入插件，首屏快。
- CKEditor 5 採用 ESM + Tree-shaking，打包後可精準控制體積，但配置較複雜。
- 避免在頁面載入時同步初始化多個編輯器實例，採用懶加載（用戶點擊輸入框再動態 import）。
5. 授權合規
- LGPL：允許商業閉源專案動態連結（保留用戶替換庫的權利），需保留授權聲明。
- GPL：若專案分發（含 SaaS 視為分發？爭議中），專案需開源。
- 商業授權：移除開源義務、獲得技術支援、解鎖進階功能（協作、無障礙檢查、導出 PDF/Word）。
- 建議：商業產品請諮詢法務，或直接購買商業授權規避風險。
遷移建議：從舊編輯器升級
- 資料清洗：舊 HTML 可能含非標準標籤，上線前跑一次 `HTMLPurifier` 統一格式。
- 漸進式替換：新頁面用新編輯器，舊頁面維持舊編輯器，資料庫欄位共用。
- 工具列對齊：根據業務需求精簡按鈕，避免「功能過載」干擾用戶。
- 測試矩陣：Chrome/Edge/Firefox/Safari + iOS Safari + Android Chrome + IE11（如必須）。
總結推薦
- 新專案、現代技術棧、需協作/TypeScript → CKEditor 5
- 快速上手、輕量、靈活配置、預算有限 → TinyMCE 6（社群版）
- 必須支援 IE11、不想重構舊架構 → CKEditor 4 LTS
- 極簡場景、只需基本排版 → 原生 `
