Free
Pro

Rich Text Editor

<base-rich-text-editor> is a lightweight WYSIWYG editor with a themed toolbar and a contenteditable body. It integrates with Angular Forms and emits HTML.

Pro Built with Base UI icon buttons, tooltips, dropdown, and divider.

Rich Text Editor — part of Base UI Pro

Unlock it plus 90 pro blocks, widgets & layouts — $99 one-time. Lifetime updates, 14-day money-back guarantee.

Unlock Pro

Basic usage

Bind HTML with [(ngModel)] or a reactive form control. The toolbar covers bold / italic / underline / strike, headings, lists, alignment, links, undo / redo, and clear formatting.

Welcome to the Base UI rich text editor. Try italic, underline, lists, and links.

HTML value 

<p>Welcome to the <strong>Base UI</strong> rich text editor. Try <em>italic</em>, <u>underline</u>, lists, and links.</p>

HTML

Installation

Run the following command to add this component to your project:

bash

npx base-ui-cli add rich-text-editor

API Reference

For AI agents

Copy a prompt with the registry name, CLI install, and import — or add the Base UI MCP server.

bash

npx -y base-ui-mcp

Base UI provides standalone components. Import the exact elements you want to use into your component.

typescript (Example)

// Install: npx base-ui-cli add rich-text-editor
// Paths are relative to aliases.components (default: src/app/components)
import { RichTextEditorComponent } from './rich-text-editor/rich-text-editor.component';

@Component({
  selector: 'app-your-component',
  imports: [
    RichTextEditorComponent
  ],
  template: `...`
})
export class YourComponent {}

API for rich-text-editor — generated from JSDoc in the library source.

API reference for rich-text-editor
APIMemberTypeDefaultDescription
base-rich-text-editorclassstring''Extra host classes merged via `cn()`.
base-rich-text-editorplaceholderunknown'Write something...'Placeholder shown when the editor is empty.
base-rich-text-editorminHeightnumber180Minimum height of the editable area in pixels.
base-rich-text-editorariaLabelunknown'Rich text editor'Accessible label for the editable region.