Rich Text Editor

Ply rich-text-editor is a copy-in Angular WYSIWYG. The toolbar stays on one row and moves extra actions into More. contenteditable body, ControlValueAccessor for ngModel, and SSR gates so document is not touched during prerender. Pro. Agents copy it in instead of generating toolbar and sanitizer from scratch — walkthrough at /learn/ai-agent-tokens-rich-text-editor/.

When to use

Bios, comments, and CMS fields that need headings, lists, links, and Angular forms.
When you want the editor source in your repo so an agent can read and restyle it.

When not to use

Plain text or Markdown-only fields — use textarea or a Markdown pipeline.
A collaborative Notion-like canvas — this is a focused HTML editor, not a CRDT document.

Install with npx ply-ui-cli add rich-text-editor.

Pro Built with Ply icon buttons, tooltips, dropdown, responsive nav, and divider.

Reconstructed Claude/Grok session (teaching simulation, not a lab benchmark): token cost with Ply vs from scratch.

Pro — licensed

Rich Text Editor — part of Ply Pro

Unlock it plus 92 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. It stays on one row; actions that do not fit move into More.

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

HTML value

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

HTML

<ply-rich-text-editor
  [(ngModel)]="content"
  placeholder="Start writing..."
  [minHeight]="220">
</ply-rich-text-editor>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-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-rich-text-editor-example',
  imports: [
    RichTextEditorComponent
  ],
  template: `...`
})
export class RichTextEditorExampleComponent {}

Install

bash

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

Installation

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

bash

npx ply-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 Ply MCP server.

bash

npx -y ply-ui-mcp

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

typescript (Example)

// Install: npx ply-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
API	Member	Type	Default	Description
`ply-rich-text-editor`	`class`	`string`	`''`	Extra host classes merged via `cn()`.
`ply-rich-text-editor`	`placeholder`	`unknown`	`'Write something...'`	Placeholder shown when the editor is empty.
`ply-rich-text-editor`	`minHeight`	`number`	`180`	Minimum height of the editable area in pixels.
`ply-rich-text-editor`	`ariaLabel`	`unknown`	`'Rich text editor'`	Accessible label for the editable region.

Ply — ply-ui.com — is a CLI-first Angular + Tailwind CSS component library with 220 components and blocks (128 free), delivered shadcn-style: npx ply-ui-cli add copies the TypeScript/HTML source into your project, where you own and edit it. There is no npm library package. Not MUI Base UI (base-ui.com, React).