什麼是所見即所得文字編輯器（WYSIWYG Editor）？商用免費與付費方案完整比較

在網站後台、部落格平台、文件管理系統中，最常見的元件之一就是「所見即所得文字編輯器」（WYSIWYG Editor，What You See Is What You Get）。這類編輯器讓使用者不需懂 HTML 語法，就能像在 Word 一樣編排文字、插入圖片與表格，螢幕上看到的樣貌就會是實際發布後的樣子。本文將介紹 WYSIWYG 編輯器的運作原理、授權類型差異，並完整比較 TinyMCE、Editor.js、Summernote 三大開源免費方案，以及其他常見需付費授權的商業方案，幫助你依據團隊規模與功能需求做出合適的選擇。

一、什麼是 WYSIWYG 編輯器？

WYSIWYG 是「What You See Is What You Get」的縮寫，意指「所見即所得」。這類編輯器透過視覺化介面讓使用者透過工具列、對話框等方式即時編輯內容，所看到的畫面會與最終發布結果幾乎一致。

相對於 WYSIWYG，另一種編輯模式稱為「Markdown 編輯器」或「純文字 HTML 編輯器」，使用者需要輸入特定語法（Markdown 或 HTML 標籤）後才能看到渲染結果。

WYSIWYG 編輯器的核心組成

• 工具列（Toolbar）：粗體、斜體、項目符號、插入圖片等按鈕

• 編輯區（Canvas）：實際輸入與排版的區域

• 內容模型（Data Model）：記錄使用者編輯的結構化資料，多半是 HTML 片段或 JSON

• 套件生態（Plugin / Extension）：擴充功能，例如表格、方程式、協作、版本控管

二、為什麼需要 WYSIWYG 編輯器？

對於不懂技術的內容編輯者而言，WYSIWYG 編輯器大幅降低了內容維護門檻：

• 業務、行銷、人資等非技術人員可獨立上架內容

• 編輯結果可即時預覽，減少錯誤

• 對工程團隊來說，減少客製化表單與後台開發的時間

但 WYSIWYG 並非完美解方，仍有下列常見挑戰：

• HTML 雜訊：編輯器產生的 HTML 往往含有大量冗餘標籤與 inline style

• 資安風險：若未過濾 XSS，惡意腳本可能被植入

• 客製化成本：要讓編輯器完全配合自家網站的設計風格，往往需要二次開發

• 協作功能：多數編輯器原生不支援多人同時編輯與版本歷史

三、依授權方式分類的編輯器總覽

💡 重要提醒：本文中標示為「商用免費需介紹」的方案，需在軟體專案或官方網站中保留授權聲明（通常為顯示作者、Logo 或版權宣告）。實際商用前請務必詳閱各專案的 License 條款。

四、TinyMCE 介紹

定位與背景

TinyMCE 是市場上最知名的 WYSIWYG 編輯器之一，由瑞典的 Ephox 公司開發，至今已超過 20 年歷史，是企業級後台與 CMS 系統最常見的選擇之一。

主要特色

• 功能最完整：內建表格、媒體插入、字數統計、拼字檢查、表情符號等

• 外掛生態豐富：官方與社群提供超過 100 個外掛（Premium 外掛需付費）

• 框架整合佳：官方支援 React、Vue、Angular、Svelte 包裝

• 多語系：超過 60 種語言介面

• API 完整：提供完整 JavaScript API 供開發者串接

• 企業採用度高：全球前 1000 大企業中，許多 CMS、後台、文件系統均採用 TinyMCE

授權演進與重要政策

TinyMCE 的開源授權歷經多次變動，團隊在評估時務必釐清目前適用的版本與條款：

• TinyMCE v5、v6：採用較寬鬆的 MIT License，允許在商業與閉源產品中自由整合，是許多舊專案賴以使用的版本

• TinyMCE v7 起（授權變更）：自 v7 開始，開源版本改採用 GPLv2+ 授權條款。這代表若將衍生應用程式散布公開，必須同樣以 GPL 授權開源並提供原始碼

• TinyMCE 6 EOL：開源版 TinyMCE 6 已於 2024 年 10 月 31 日正式結束支援與維護，官方建議升級至最新版本或轉為商業付費授權

• 商業 / 自架授權：針對不願遵守 GPL 開源限制的商業應用，官方提供 Self-Hosted Software License Agreement 企業訂閱與付費授權方案

💡 實務建議：若團隊目前使用 TinyMCE 6 商業授權，未來升級到 v7 需特別注意條款差異；若計畫新引入 TinyMCE，建議先與法務或授權顧問確認預定用途（特別是 SaaS、OEM、閉源產品等情境）後，再決定採用開源 v7 或直接購買商業授權。

授權決策建議

適用情境

• 企業級 CMS、後台管理系統

• 需要完整功能與豐富外掛的場景

• 願意依用途選擇對應授權方案的團隊

五、Editor.js 介紹

定位與背景

Editor.js 是一款近年快速崛起的區塊式編輯器（Block-based Editor），由 CodeX 團隊於 2017 年發起，採用 Apache License 2.0 授權，完全免費且可用於商業專案（只需保留授權聲明）。其設計理念受到 Notion、Medium 等現代編輯工具啟發。

主要特色

• JSON 輸出：與傳統 HTML 編輯器不同，Editor.js 將內容以結構化 JSON 格式儲存，乾淨且易於處理

• 區塊化架構：每段內容（段落、標題、清單、圖片、引言、表格等）都是獨立的「區塊」（Block）

• 外掛豐富：官方與社群提供大量 Plugins 與 Tools，例如 Header、List、Image、Quote、Table、Embed、Code

• 乾淨的 HTML 輸出：渲染時才轉為 HTML，前端工程師可完全掌控輸出格式

• 輕量：核心檔案小，載入速度快

授權細節

• Apache License 2.0：可用於商業產品，無需付費

• 需在軟體中保留授權聲明與版權宣告

適用情境

• 後台需要輸出乾淨 JSON 進行二次處理的系統

• 想完全掌控最終 HTML 結構的工程團隊

• 喜歡 Notion 風格編輯體驗的內容編輯者

注意事項

• 學習曲線較高，開發者需理解「區塊」概念

• 預設不提供傳統工具列的「粗體 / 斜體 / 底線」快捷按鈕（需用 Markdown 快捷或安裝 Inline Toolbar 外掛）

六、Summernote 介紹

定位與背景

Summernote 是一款基於 Bootstrap 的 WYSIWYG 編輯器，於 2013 年由南韓團隊發起，採用 MIT License 授權，完全免費且可用於商業專案。其設計簡潔、易於上手，是許多後台系統的首選。

主要特色

• 超級簡單：安裝只需一行 <script> 與一行 <div>，5 分鐘即可上手

• Bootstrap 風格：UI 與 Bootstrap 3/4/5 完美整合，視覺一致

• 輕量：核心檔案約 200 KB

• 基本功能完整：粗體、斜體、清單、表格、圖片上傳、字型、顏色等

• API 簡潔：提供 summernote() jQuery 函式與完整 callback

授權細節

• MIT License：最寬鬆的開源授權之一，商用完全免費

• 無需顯示授權聲明（但建議保留版權）

適用情境

• 快速建置的內部後台、CMS

• 已有 Bootstrap 基礎的專案

• 對功能要求不高、重視開發速度的場景

注意事項

• 依賴 jQuery：在現代前端框架（React/Vue/Svelte）中使用較不便，雖有社群包裝但仍非最佳選擇

• 功能擴充有限：相較 TinyMCE、Editor.js，外掛生態較小

• 開發進度較緩慢：版本更新頻率較低

七、三大開源免費方案功能比較

三者定位差異

• TinyMCE：功能最強、版本最齊（v7+ 採用 GPLv2+），但商用閉源產品需付費授權，適合企業級後台或願意付費的團隊

• Editor.js：JSON 輸出最乾淨，工程師可完全掌控後續處理，適合需要結構化內容的系統

• Summernote：最簡單易用，5 分鐘可整合，適合快速建置內部後台

八、其他需付費授權的商業方案

除上述三大開源免費方案外，市面上還有多款需購買授權的商業 WYSIWYG 編輯器，各有特色：

1. CKEditor 5（商業版）

• 背景：CKEditor 系列歷史悠久（起源於 FCKeditor），目前由 CKSource 維護

• 授權：

- 開源版（GPL、LGPL、MPL）：可用於開源專案

- 商業版（Commercial License）：需付費，含 Premium Features 與官方技術支援

• 特色：

- 現代化架構，完全基於 ES6+ 重寫

- 完整的協作功能（Real-time Collaboration）

- 完整的表格、註腳、追蹤修訂（Track Changes）

- 提供 React、Vue、Angular 官方元件

2. Froala Editor

• 授權：商業授權（付費），不提供開源版本

• 特色：

- 業界公認「最漂亮」的 WYSIWYG 編輯器之一

- 載入速度極快，UX 流暢

- 完整響應式設計

- 提供 React、Vue、Angular、Django、Laravel 等多種框架整合

• 價格：分 Basic、Pro、Enterprise 三種方案

3. Quill

• 授權：BSD 3-Clause License（完全免費可商用）

• 特色：

- 採用「Delta 格式」儲存內容

- 輕量、模組化設計

- 現代化介面，類似 Medium 風格

- API 設計優雅，適合工程師深度整合

• 適用情境：中型後台系統，喜歡 Delta 格式的工程團隊

4. Trix（Basecamp 出品）

• 授權：MIT License（完全免費可商用）

• 特色：

- Basecamp 為自家產品開發的編輯器

- 介面簡潔優雅

- 與 ActionText 完美整合（Ruby on Rails）

- 學習曲線低

• 適用情境：Ruby on Rails 專案、喜歡 Basecamp 風格的團隊

5. ProseMirror

• 授權：MIT License（完全免費可商用）

• 特色：

- 不是完整的編輯器，而是「編輯器框架」

- 提供底層工具，開發者可完全自訂編輯體驗

- 適合需要高度客製化的特殊場景

• 適用情境：複雜的協作文件系統、學術編輯器

6. Slate.js

• 授權：MIT License（完全免費可商用）

• 特色：

- React-first 設計

- 完全可客製化的資料模型

- Notion、Medium 等現代工具的底層技術之一

- 學習曲線高，需具備 React 基礎

• 適用情境：想打造 Notion-like 編輯體驗的 React 團隊

7. TipTap

• 授權：

- 開源核心：MIT（可商用）

- Premium Extensions：付費授權

• 特色：

- 基於 ProseMirror 的現代化編輯器框架

- 完整的 Vue / React 整合

- 協作、註解、AI 助手等進階功能

• 適用情境：需要快速建置客製化編輯器的前端團隊

九、如何選擇合適的編輯器？

選擇 WYSIWYG 編輯器時，建議依下列決策流程評估：

1. 確認授權類型

• 開源專案：TinyMCE v7（GPLv2+，願意開源衍生）、CKEditor 開源版、Quill、Trix、Slate.js

• 商業閉源專案：

- 完全免費：Editor.js、Quill、Trix、ProseMirror、Slate.js、TipTap（核心）

- 需付費：TinyMCE Enterprise / Self-Hosted、CKEditor 商業版、Froala

2. 依功能需求評估

• 需要表格、註腳、複雜排版：TinyMCE、CKEditor 5

• 需要乾淨 JSON 輸出：Editor.js

• 需要 Real-time 協作：CKEditor 5 商業版、TipTap Premium

• SaaS、OEM、閉源商用：TinyMCE Self-Hosted、CKEditor 商業版、Froala

3. 依技術棧評估

• jQuery / Bootstrap 環境：Summernote

• React：TipTap、Slate.js、TinyMCE React 包裝

• Vue：TinyMCE Vue 包裝、TipTap

• Angular：TinyMCE Angular 包裝、CKEditor 5

4. 依團隊技術能力評估

• 無工程師、純後台使用：Summernote（最簡單）

• 前端工程師充足：Editor.js、TipTap、Slate.js（彈性高）

• 需立即上手：TinyMCE（文件與範例最豐富）

5. 評估長期維護成本

• 外掛付費陷阱：TinyMCE 與 CKEditor 5 許多進階功能（拼字檢查、AI 助手、進階表格）屬於 Premium Plugins；TinyMCE 自 v7 起開源版改採 GPLv2+，商用前務必釐清授權，長期使用需評估授權成本

• 客製化人力成本：Editor.js 與 Slate.js 雖免費，但要客製化功能需投入工程時間

十、結語

WYSIWYG 編輯器的選擇，沒有「最好」，只有「最適合」。對於預算有限、重視快速整合的團隊，Summernote 與 Editor.js 是最友善的起點；對於功能要求完整、願意付費購買授權的企業，TinyMCE Enterprise 與 CKEditor 5 商業版 仍是業界標竿；而對於追求極致客製化、想完全掌控內容結構的工程團隊，Editor.js、Slate.js、TipTap 則提供最大的彈性。

在導入前，建議先盤點以下三點：(1) 商用授權的相容性、(2) 內容輸出的格式需求、(3) 與現有技術棧的整合成本。做好這三項評估，就能選出最適合團隊長期發展的編輯器方案。