@richhtmleditor/angular

Angular standalone component for Rich HTML Editor, built on @richhtmleditor/core. WYSIWYG authoring with toolbar presets, ControlValueAccessor for reactive forms, and plugin support for enterprise AI, comments, and workflows.

Current release: 1.2.10 — Depends on @richhtmleditor/core ^1.2.10.

Repository: github.com/rajkishorsahu89/richhtmleditor

Demo: richhtmleditor.stackkitlabs.com — demo · guide · API. Doc Preview joint demo: stackkitlabs.com/products/doc-preview

What's in 1.2.10

• RichHtmlEditorComponent — selector richhtmleditor; mounts createEditor on init
• ControlValueAccessor — bind with [(ngModel)] or formControlName (HTML string value)
• Toolbar & features — [toolbar], [features], [plugins] mirror core CreateEditorOptions
• Events — (contentChange) and (save) emit EditorContent (html + json)
• [menubar] — pass a MenuDef[] array to mount a traditional File / Edit / Insert menu bar
• Re-exports all public symbols from @richhtmleditor/core

New in 1.2.10

| Feature | Angular usage | | --- | --- | | Callout blocks — info / warning / success / error styled blocks | editor.commands.insertCallout("info") or toolbar Callout dropdown | | Embed blocks — YouTube, Loom, Figma auto-embed | Paste URL to auto-embed; or editor.commands.insertEmbed(url) | | Word goal + progress bar | editor.commands.setWordGoal(500) — progress bar appears in status bar | | Reading time | Displayed automatically: status bar shows ~N min read | | Dark mode toggle | [dark]="true" input or toolbar toggleDarkMode button | | Markdown shortcuts | Always on — ## → H2, **bold**, _italic_, `code` | | Markdown import | editor.commands.importMarkdown() — opens .md file picker | | Case change | editor.commands.caseChange("upper" \| "lower" \| "title" \| "sentence") | | Smart typography | Auto-converts straight quotes, -- → em dash, ... → ellipsis | | Autolink | URLs auto-link on paste and after typing a space | | Task lists | [features]="{ taskList: true }" — checkbox bullet lists | | XLSX / CSV paste | Paste from Excel or Google Sheets → inserts a table | | Menu bar | [menubar]="menuDefs" — traditional File / Edit / Insert / Format menu bar | | Table sort | Click any <th> to sort column; click again to reverse | | Undo history panel | editor.commands.undoHistoryPanel() — sidebar with full undo stack | | TOC navigation | Click a TOC entry in the outline panel → scrolls to that heading | | Preview modal | editor.commands.previewModal() — read-only rendered preview overlay | | Autoresize | [features]="{ autoresize: true }" — editor grows with content | | Mobile touch | Touch-optimised toolbar; 40 px tap targets on pointer: coarse devices |

Ships as ESM with TypeScript declarations, compiled through the Angular compiler (ngc, partial Ivy compilation) so ng build AOT works out of the box — no linker or NG2012 errors. Works with Angular 19–22 (@angular/core ^19 || ^20 || ^21 || ^22; @angular/forms is a peer dependency too). Import @richhtmleditor/themes CSS in angular.json or global styles.

Keywords: richhtmleditor angular standalone wysiwyg rich-text-editor forms

Install

npm install @richhtmleditor/angular @richhtmleditor/themes
# Adds @richhtmleditor/core automatically.
# Peer deps: @angular/core ^19 || ^20 || ^21 || ^22, @angular/forms ^19 || ^20 || ^21 || ^22.
# Optional enterprise plugins:
npm install @richhtmleditor/enterprise @richhtmleditor/ai @richhtmleditor/comments @richhtmleditor/workflows

Usage — component

// app.component.ts
import { Component } from "@angular/core";
import { RichHtmlEditorComponent } from "@richhtmleditor/angular";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [RichHtmlEditorComponent],
  template: `
    <richhtmleditor
      [toolbar]="{ preset: 'standard' }"
      [content]="html"
      (contentChange)="html = $event.html"
    />
  `
})
export class AppComponent {
  html = "<p>Hello <strong>world</strong></p>";
}

Add styles once in angular.json:

"styles": ["node_modules/@richhtmleditor/themes/richhtmleditor.css"]

Usage — reactive forms

<richhtmleditor
  formControlName="body"
  [toolbar]="'standard'"
  [features]="features"
/>

import { FormControl, ReactiveFormsModule } from "@angular/forms";
import type { EditorFeatureFlags } from "@richhtmleditor/angular";

features: EditorFeatureFlags = { tables: true, media: true };
body = new FormControl("<p>Draft content</p>");

Usage — enterprise plugins

import { createAiPlugin } from "@richhtmleditor/ai";
import { createCommentsPlugin } from "@richhtmleditor/comments";
import { createWorkflowsPlugin } from "@richhtmleditor/workflows";
import { resolveEnterpriseFeatures } from "@richhtmleditor/enterprise/browser";

const gate = resolveEnterpriseFeatures({ token: "RHE-ENT-DEMO-2026-FULL" });

plugins = [
  createAiPlugin({ onGenerate: async (req) => callYourLlm(req) }),
  createCommentsPlugin({ author: "Reviewer" }),
  createWorkflowsPlugin({ actor: "Legal", role: "editor" })
];
features = gate.features;

<richhtmleditor
  [features]="features"
  [plugins]="plugins"
  [toolbar]="{ preset: 'full' }"
/>

Demo key (documentation only): RHE-ENT-DEMO-2026-FULL

API

RichHtmlEditorComponent inputs

| Input | Type | Description | | --- | --- | --- | | content | string | Initial HTML (also set via writeValue / ngModel). | | editable | boolean | Enable editing (default true). | | dark | boolean | Dark theme tokens. | | theme | EditorThemeTokens | Custom CSS variable overrides. | | toolbar | ToolbarConfig \| ToolbarPresetId | Toolbar preset or custom layout. | | features | EditorFeatureFlags | Feature gates (tables, AI, comments, workflows, …). | | plugins | EditorPlugin[] | Enterprise and custom plugins. | | toolMounts | CreateEditorOptions["toolMounts"] | Per-tool custom DOM mounts. | | autoSave | boolean \| string | Enable localStorage auto-save with optional key. |

RichHtmlEditorComponent outputs

| Output | Type | Description | | --- | --- | --- | | contentChange | EditorContent | Emitted on every document edit (html + json). | | save | EditorContent | Emitted when the user triggers save. |

Angular vs React naming

| Angular | React | | --- | --- | | <richhtmleditor> | <RichHtmlEditor /> | | (contentChange) | onChange | | (save) | onSave | | [content] | content |

Browser support

Requires a modern browser with contentEditable, Selection, and fetch. Mount <richhtmleditor> only in the browser for SSR (e.g. afterNextRender or @if (isBrowser)).

Related packages

• @richhtmleditor/core — framework-agnostic engine (auto-installed).
• @richhtmleditor/themes — shared CSS.
• @richhtmleditor/enterprise — licence tokens and feature flags.
• @richhtmleditor/ai — AI authoring plugin.
• @richhtmleditor/comments — review comments plugin.
• @richhtmleditor/workflows — approval workflows plugin.
• @richhtmleditor/react — React component on the same core.
• @richhtmleditor/vue — Vue 3 component on the same core.
• @richhtmleditor/collab — Yjs collaboration plugin.
• @richhtmleditor/diagrams — Mermaid diagrams plugin.
• @richhtmleditor/math — LaTeX/MathML equation plugin.
• @richhtmleditor/export — DOCX/PDF/HTML export plugin.
• @richhtmleditor/spellcheck — real-time spell check plugin.
• @richhtmleditor/templates — document templates plugin.
• @richhtmleditor/mentions — @ mentions plugin.

License

MIT