Tsao Editor

Integration guide

Build an editor toolbar that belongs to your product

Choose built-in commands, replace icons, control button presentation, and register typed plugins without forking the editor package.

Compose only the actions a workflow needs

The toolbar is an ordered configuration array. A compact publishing form can expose only formatting and links, while a CMS editing screen can add tables, templates, comments, outline, search, images, and AI assistance.

readonly toolbar = [
  'undo', 'redo', 'heading', 'bold', 'textColor',
  'link', 'image', 'table', 'clearFormat',
];

Extend behavior with plugins

A plugin declares its API version, toolbar action, allowed classes, and execution handler. Plugin dialogs use editor-owned Material classes so host-project themes cannot make the panel transparent or resize its controls unexpectedly.

Keep packaged UI independent

  • Every button has an editor-owned class and stable dimensions
  • Material overlays use package panel and backdrop classes
  • Icons can be packaged or supplied by the host application
  • Plugin output passes through the editor sanitizer

Continue reading

Use your design-system colors inside the editorConfigure grouped, class-based text, text background, and table cell color palettes in an Angular rich text editor.Rich text HTML with explicit security boundariesUnderstand Tsao Editor HTML sanitization, allowed classes, URL validation, iframe sandboxing, and safe readonly rendering.