Tsao Editor

為正式內容工作流程打造的 Angular 富文字編輯器

Tsao Editor 讓 Angular 團隊保有文件結構、應用程式樣式與整合程式碼的控制權，同時提供可設定的 TypeScript 編輯體驗。

開啟 Angular 22 Demo 查看 Angular Forms 整合

Angular: 17 · 19 · 20 · 21 · 22
輸出: HTML · Text · Markdown · JSON
授權: NT$6,800 · 12 個月更新

Tsao Editor Angular 富文字編輯器操作畫面 — 實際 Demo 包含表格、圖片、色票、留言、提及與輸出預覽。

專注於編輯器套件，而不是綁定代管內容平台

Tsao Editor 可以直接放進既有 Angular 應用程式，並使用 Reactive Forms 或 Template-driven Forms。工具列、輸出模式、上傳處理、色票、表格、留言、提及與 AI 動作都由應用程式設定。

編輯器輸出不含 script 與 inline style 的語意化 HTML。以 class 管理格式，讓相同內容可以穩定呈現在 CMS、預覽畫面、郵件流程與前台網站。

不只粗體與斜體的完整 Angular 編輯功能

提供 Angular 17、19、20、21 與 22 的獨立套件
透過 ControlValueAccessor 整合 Angular Forms
支援多儲存格選取與自訂色票的表格功能
圖片、連結、提及、留言、範本與文件大綱
自訂工具列圖示、插件、區塊格式、文字大小與顏色
HTML、純文字、Markdown 與 JSON 文件輸出

選擇符合專案版本的 Angular 套件

每個支援的 Angular major 都有獨立建置的 Demo 與套件，API 盡量維持一致，讓團隊可以依照自己的時程升級 Angular。

一次購買，包含十二個月更新與支援

商業授權價格為一次性付款 NT$6,800，包含數位簽章授權、所有支援的 Angular 套件、五個正式網域，以及十二個月套件更新與 Email 支援。

查看商業授權

文件導覽

從實際需求開始了解 Tsao Editor

功能

適合 Angular 內容工作流程的表格編輯器在 Angular 富文字編輯器中建立與格式化表格，支援多儲存格選取、自訂框線與固定色票、標題列及語意化 HTML。留在應用程式安全邊界內的圖片上傳將應用程式自己的圖片上傳處理器接到 Angular 富文字編輯器，驗證檔案並輸出安全的語意化圖片標記。連接既有資料的留言與提及功能在 Angular 富文字編輯器加入由應用程式管理的留言與可搜尋提及功能，並使用型別安全 callback 與 token renderer。不在 Angular 暴露 API key 的 AI 文字輔助替 Angular 編輯器加入可設定的 AI 文字動作，並將 API key 與模型呼叫保留在應用程式自己的安全後端。

整合指南

在 Angular Forms 使用富文字編輯器透過 ControlValueAccessor 與型別化輸出模式，把 Tsao Editor 整合進 Angular Reactive Forms 或 Template-driven Forms。建立真正屬於產品的編輯器工具列設定 Tsao Editor 工具列功能、自訂圖示、固定尺寸、應用程式 Dialog 與型別安全插件。在編輯器使用產品的 Design System 色彩在 Angular 富文字編輯器設定分群且以 class 輸出的文字顏色、文字底色與表格儲存格色票。

安全

具有明確安全邊界的富文字 HTML了解 Tsao Editor 的 HTML sanitization、允許 class、URL 驗證、iframe sandbox 與安全 readonly rendering。

編輯器比較

在 Angular 專案評估 Tsao Editor 與 CKEditor比較 Tsao Editor 與 CKEditor 在 Angular Forms、語意化 HTML、應用程式設定、授權與套件交付上的整合方向。在 Angular 專案評估 Tsao Editor 與 TinyMCE比較 Tsao Editor 與 TinyMCE 在 Angular Forms、語意化 HTML、外部服務、授權與客製化上的整合方向。