Rich text editor
@xui/rich-text-editorA WYSIWYG editor whose value is source text: the user formats content, the binding is the Markdown or BBCode you store. The toolbar is the format's capabilities — Markdown gets headings, a divider and inline code; BBCode gets underline instead. </> swaps the formatted view for the source text, editable, and back.
Install
pnpm add @xui/rich-text-editor Add the barrel to a standalone component's imports:
import { XuiRichTextEditorImports } from '@xui/rich-text-editor';
@Component({
imports: [XuiRichTextEditorImports],
// …
})Examples
Markdown
Loading preview…
<div class="max-w-2xl space-y-3">
<xui-rich-text-editor [(value)]="value" placeholder="Say something…" />
<pre class="bg-surface-sunken text-foreground-muted overflow-x-auto rounded-lg p-3 font-mono text-xs">{{ value || '(empty)' }}</pre>
</div>Bbcode
Loading preview…
<div class="max-w-2xl space-y-3">
<xui-rich-text-editor [(value)]="value" format="bbcode" />
<pre class="bg-surface-sunken text-foreground-muted overflow-x-auto rounded-lg p-3 font-mono text-xs">{{ value || '(empty)' }}</pre>
</div>Empty
Loading preview…
<div class="max-w-2xl space-y-3">
<xui-rich-text-editor [(value)]="value" placeholder="Write a comment…" />
<pre class="bg-surface-sunken text-foreground-muted overflow-x-auto rounded-lg p-3 font-mono text-xs">{{ value || '(empty)' }}</pre>
</div>Source view
Loading preview…
<div class="max-w-2xl space-y-3">
<xui-rich-text-editor [(value)]="value" [(source)]="source" />
<pre class="bg-surface-sunken text-foreground-muted overflow-x-auto rounded-lg p-3 font-mono text-xs">{{ value || '(empty)' }}</pre>
</div>Disabled
Loading preview…
<div class="max-w-2xl"><xui-rich-text-editor [value]="value" disabled /></div>API
A WYSIWYG editor whose value is source text.
Inputs
classClassValueExtra classes, merged into the component's own rather than replacing them.''valuestringThe source text, in the active format. Two-way bindable, and the form value.''formatstring'markdown', 'bbcode', or any format registered with provideXuiRichTextSyntax.this.config.formatplaceholderstringText shown over the empty editor.this.config.placeholdersourceViewbooleanOffer the source-text toggle.this.config.sourceViewdisabledbooleanBlock editing and dim the editor and its toolbar.falseminHeightnumberHeight of the writing area before it grows with the content.180ariaLabelstring | undefinedAccessible name for the editing surface — what is being written.undefinedsourcebooleanWhether the source view is showing. Two-way bindable.falseMethods
focus(): voidThe editing surface, for consumers who need to focus it.