@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.1.1 — Depends on @richhtmleditor/core ^1.1.1.

Repository: github.com/rajkishorsahu89/richhtmleditor

Demo: richhtmleditor.vercel.app — demo · guide · API. Doc Preview joint demo: doc-preview-app.vercel.app/demo/enterprise

What's in 1.1.1

• 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)
• Re-exports all public symbols from @richhtmleditor/core

Ships as ESM with TypeScript declarations. Works with Angular 19+, 20, and 21 (@angular/core ^19 || ^20 || ^21). 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.
# 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