Integration guide
Use a rich text editor with Angular Forms
Tsao Editor implements ControlValueAccessor, so editor content participates in the same value, disabled, validation, and submission flow as the rest of an Angular form.
Reactive Forms
Import the standalone editor component, create a form control, and bind it with formControlName. The configured output mode determines whether the control receives HTML, plain text, Markdown, or a JSON document.
editorForm = new FormGroup({
content: new FormControl('<p>Draft content</p>', { nonNullable: true }),
});
<tsao-editor formControlName="content" />Shared defaults and local overrides
Use provideTsaoEditor in application configuration when several editors share toolbar, palette, table, upload, or output defaults. Individual component inputs still override a shared setting for one editor.
Form behavior to verify
- Disabled state follows the Angular control
- Touched state is reported when the editor loses focus
- External control values update the document
- Editor changes participate in validation and submission