Tsao Editor

Integration guide

Use your design-system colors inside the editor

Provide fixed color groups for text, highlights, and table cells, or enable a color picker where arbitrary colors are acceptable.

Prefer class-based colors for managed content

Each fixed option has a label and class name. The editor applies the class to selected content and removes conflicting classes from the same option group. A default option with an empty class clears the current color cleanly.

readonly textColors = [
  { label: 'Default', className: '', group: 'Text colors' },
  { label: 'Brand', className: 'app-text-brand', group: 'Brand colors' },
  { label: 'Danger', className: 'app-text-danger', group: 'Status colors' },
];

One palette model across editor surfaces

  • Main toolbar text color
  • Floating selection toolbar text color
  • Text background and highlight color
  • Single-cell and multi-cell table background
  • Grouped swatches with visible labels

Continue reading

Table editing designed for Angular content workflowsCreate and format accessible tables in Angular with multi-cell selection, configurable borders, fixed color palettes, header rows, and semantic HTML output.Build an editor toolbar that belongs to your productConfigure Tsao Editor toolbar actions, custom icons, fixed dimensions, application-owned dialogs, and typed plugins.