Rich Text Editor for Angular

import { AuiRichTextEditor } from '@absoluteui/angular/rich-text-editor';

Styles are included with the component. Behavior, keyboard and screen-reader support, design tokens, and limitations are described on the Rich Text Editor page; this page covers the Angular API.

Defaults for every instance: provideAbsoluteUIConfig({ components: { richTextEditor: { ... } } }) (see Configuration).

Example

import { Component } from '@angular/core';
import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
import { AuiRichTextEditor } from '@absoluteui/angular/rich-text-editor';

@Component({
  selector: 'app-release-notes',
  imports: [ReactiveFormsModule, AuiRichTextEditor],
  template: `<aui-rich-text-editor label="Release notes" valueFormat="markdown" [maxLength]="5000" [showCounter]="true" [formControl]="notes"></aui-rich-text-editor>`,
})
export class ReleaseNotesComponent {
  readonly notes = new FormControl('', { nonNullable: true, validators: [Validators.required] });
}

<aui-rich-text-editor>

Class AuiRichTextEditor; template reference #ref="auiRichTextEditor".

Server rendering: Renders in the browser only; on the server the element stays empty.

Angular forms: implements ControlValueAccessor and Validator; the form value is string. Bind [formControl], formControlName, or [(ngModel)]; validation messages of the component report through the aui error key. See Forms.

Inputs

Input	Type	Default	Description
label	string		Required. Visible label and accessible name of the textbox (aria-labelledby).
hideLabel	boolean	false	Visually hide the label; it remains the accessible name.
valueFormat	RichTextValueFormat	'html'	Format of value, getFormValue(), and event details. Default ‘html’ in rich mode and ‘text’ in plain mode.
mode	RichTextMode	'rich'	‘plain’: no formatting and no toolbar; paragraphs and line breaks only. Switching to ‘plain’ converts the content to plain text.
name	string		Form field name; a hidden input carries the value for native form submission.
placeholder	string		Shown while the editor is empty (also aria-placeholder); never replaces the label.
description	string		Help text referenced by aria-describedby.
required	boolean	false	Empty (or whitespace-only) text is invalid; shows the required indicator and sets aria-required.
disabled	boolean	false	Not editable and not focusable; toolbar tools are aria-disabled.
readOnly	boolean	false	Focusable and submitted but not editable (aria-readonly).
minLength	number		Minimum length of the plain text in code points (integer >= 0, <= maxLength).
maxLength	number		Maximum length of the plain text in code points (validated, not truncated).
showCounter	boolean	false	Show remaining/over characters; requires maxLength.
toolbar	readonly RichTextToolbarItem[]	'paragraph,heading1,heading2,heading3,|,bold,italic,underline,strike,code,link,|,bulletList,orderedList,quote,codeBlock,|,alignStart,alignCenter,alignEnd,alignJustify,|,undo,redo,clearFormatting'	Toolbar items in order; ‘|’ is a separator. Heading items for levels not in headings are omitted. Hotkeys and Markdown shortcuts work regardless of the items shown.
headings	readonly RteHeadingLevel[]	'1,2,3'	Heading levels offered and accepted from HTML/Markdown (non-empty); other levels map to the nearest allowed lower level.
linkSchemes	readonly string[]	'http,https,mailto,tel'	URL schemes allowed in links besides relative URLs (lowercase, without ‘:’). javascript, data, and vbscript are never allowed and throw.
rows	number	'6'	Minimum visible height in text rows, integer 1..100.
maxRows	number		Maximum height in rows (integer >= rows, <= 100); the content scrolls beyond it.
spellcheck	boolean	true	Native spellcheck on the content element.
validate	(value: string) => string | null		Consumer validation of the value in valueFormat; return a message to mark it invalid. Runs after the built-in constraints pass.
icons	Partial<RichTextEditorIcons>		Icon slot overrides.
validationTiming	ValidationTiming	'blur'	When validation messages first appear; afterwards they update live.
markdownShortcuts	boolean	true	Markdown typing shortcuts: ’# ’, ’- ’, ’1. ’, ’> ’, ‘```’ + Enter, bold, italic, code, strike (rich mode only).
historyLimit	number	'100'	Undo depth, integer 0..1000. Typing (or deleting) within 1 s is one undo step.
locale	string	'en-US'	Toolbar, link panel, announcement, and validation message locale; word and grapheme boundaries for deletion.
direction	Direction	'ltr'	‘rtl’ sets dir=“rtl” on the content element (‘ltr’ leaves dir=“auto”) and maps formatJustifyLeft/Right to end/start.

Two-way bindings

Model	Type	Change output	Description
[(value)]	string	(valueChange)	The value: [(value)] without forms; with Angular forms, bind the form control instead.

Outputs

Output	Payload	Description
(valueInput)	RichTextEditorValueDetail	The user edited the content (typing, deletion, formatting, paste, drop, cut, undo, redo). Re-emits aui-input.
(changed)	RichTextEditorValueDetail	Focus left the component (host) and the content differs from when it was focused. Re-emits aui-change.

Methods

Call them through a viewChild query or a template reference.

Method	Description
getHTML(): string | undefined	Content as sanitized HTML (‘’ when empty; plain text in plain mode).
setHTML(html: string): void	Replace the content from HTML (sanitized); no events; clears history and an external custom error.
getMarkdown(): string | undefined	Content as Markdown (‘’ when empty; plain text in plain mode).
setMarkdown(markdown: string): void	Replace the content from Markdown; no events; clears history and an external custom error.
getText(): string | undefined	Plain text; blocks are separated by a line break.
setText(text: string): void	Replace the content from plain text (one paragraph per line); no events; clears history.
command(item: "undo" | "redo" | "paragraph" | "heading1" | "heading2" | "heading3" | "bold" | "italic" | "underline" | "strike" | "code" | "link" | "bulletList" | "orderedList" | "quote" | "codeBlock" | "alignStart" | "alignCenter" | "alignEnd" | "alignJustify" | "clearFormatting"): void	Run a toolbar command at the selection (for custom toolbars). No-op when disabled or read-only; formatting commands are no-ops in plain mode.
undo(): boolean | undefined	Undo one step; returns false when there is nothing to undo. Emits aui-input.
redo(): boolean | undefined	Redo one step; returns false when there is nothing to redo. Emits aui-input.
insertText(text: string): void	Insert text at the selection (replacing it) with the current style, as an edit (emits aui-input).
openLinkEditor(): void	Open the link panel for the selection or the link around the caret (Mod+K); focuses the address field.
reportValidity(): boolean | undefined	Show messages now and return validity.
setCustomError(message: string | null): void	External error (server, cross-field rule); cleared when the user edits. null or ‘’ clears it.
getFormValue(): string | undefined	Value for form serialization (same as value).
focus(): void	Focus the content and restore the last selection.
reset(): void	Restore the initial value; clear history and dirty/touched/submitted state.