Tsao Editor

功能

不在 Angular 暴露 API key 的 AI 文字輔助

定義使用者真正需要的 AI 動作，把選取文字送到後端，預覽回傳結果，再由使用者決定是否取代內容。

提供整合介面，不綁定模型

AI action 包含 id、標籤與說明，handler 會收到動作與選取內容並回傳預覽文字。後端可以串接 Gemini 或其他模型，並套用 rate limit、稽核與內容政策。

Demo 使用 Node API，Gemini key 保留在 AWS Systems Manager Parameter Store，不會打包進 Angular JavaScript。

適合正式產品的互動

  • 執行前清楚解釋每個 AI 動作
  • 選取範圍或 Dialog 關閉時取消請求
  • 取代內容前先預覽結果
  • Provider credential 只放在 Server
  • 使用自己的模型、prompt、紀錄與權限政策

延伸閱讀

在 Angular Forms 使用富文字編輯器透過 ControlValueAccessor 與型別化輸出模式，把 Tsao Editor 整合進 Angular Reactive Forms 或 Template-driven Forms。具有明確安全邊界的富文字 HTML了解 Tsao Editor 的 HTML sanitization、允許 class、URL 驗證、iframe sandbox 與安全 readonly rendering。