Tsao Editor

Feature

AI writing actions without exposing API keys in Angular

Define the actions your users need, send selected text to your backend, preview the response, and let the user decide whether to replace the document selection.

An integration point, not a locked model

AI actions contain an identifier, label, and explanation. The handler receives the action and selected content, then returns preview text. Your backend can call Gemini or another model and enforce rate limits, audit rules, and content policy.

The demo uses a Node API so the Gemini key remains in AWS Systems Manager Parameter Store rather than being shipped in the Angular bundle.

Product-safe interaction

  • Explain every AI action before the user runs it
  • Abort requests when the selection or dialog closes
  • Preview generated text before replacing content
  • Keep provider credentials on the server
  • Use your own model, prompt, logging, and access policy

Continue reading

Use a rich text editor with Angular FormsIntegrate Tsao Editor with Angular Reactive Forms or Template-driven Forms through ControlValueAccessor and typed output modes.Rich text HTML with explicit security boundariesUnderstand Tsao Editor HTML sanitization, allowed classes, URL validation, iframe sandboxing, and safe readonly rendering.