Angular editor

The Angular rich text editor that ships as a standalone component.

Import RichTextEditorAngularComponent, drop <rich-text-editor> into your template, and bind typed change/ready events. Underneath: AI Toolkit, per-node CRDT collaboration, tracked changes, and clean HTML output.

View live demosQuick startDownload
Angular focus

Standalone-component era, no NgModule required.

Typed inputs and outputs[value], [config], [valueFormat] in; (change), (ready), (error) out — all typed.
Asset pipeline built inPoint one angular.json glob at the package’s runtime folder; assetBasePath defaults to /richtexteditor and auto-loads it.
Full engine surfaceViewChild the component for getHTMLCode, getJSON/setJSON, statistics, outline, and plugin accessors.
Sony
Intel
Nokia
Siemens
IBM
Microsoft

Install and wire the assets once

One npm package ships the engine, the Angular bindings, and the plugin bundle. The editor runtime (its scripts, styles, and language files) is served as static assets — add one glob to angular.json and the component’s autoload takes care of loading them.

npm install @richscripts/richtexteditor
// angular.json - copy the editor runtime into your app's /richtexteditor path
"assets": [
  "src/favicon.ico",
  "src/assets",
  {
    "glob": "**/*",
    "input": "node_modules/@richscripts/richtexteditor/richtexteditor",
    "output": "/richtexteditor"
  }
]

The component

Standalone — import it straight into your component’s imports array. The change event carries the live editor instance and the current value in your chosen valueFormat (HTML by default, or the structured JSON document).

import { Component } from "@angular/core";
import {
  RichTextEditorAngularComponent,
  type RichTextEditorAngularChangeEvent
} from "@richscripts/richtexteditor/angular";

@Component({
  selector: "app-composer",
  standalone: true,
  imports: [RichTextEditorAngularComponent],
  template: `
    <rich-text-editor
      [value]="html"
      [config]="{ height: 400 }"
      (change)="onChange($event)"
      (ready)="onReady()"
    ></rich-text-editor>
  `,
})
export class ComposerComponent {
  html = "<p>Draft your update...</p>";

  onChange(event: RichTextEditorAngularChangeEvent) {
    this.html = event.value as string;   // valueFormat defaults to "html"
  }

  onReady() {
    console.log("editor mounted");
  }
}

Reading and writing content imperatively

Grab the component with ViewChild for the full typed surface: HTML in/out, the structured JSON model, text statistics, document outline, accessibility audit, and accessors for AI Toolkit, comments, tracked changes, and collaboration.

import { Component, ViewChild } from "@angular/core";
import { RichTextEditorAngularComponent } from "@richscripts/richtexteditor/angular";

@Component({
  selector: "app-form",
  standalone: true,
  imports: [RichTextEditorAngularComponent],
  template: `
    <rich-text-editor #editor></rich-text-editor>
    <button (click)="save()">Save</button>
  `,
})
export class FormComponent {
  @ViewChild("editor") editor!: RichTextEditorAngularComponent;

  save() {
    const html = this.editor.getHTMLCode();
    const json = this.editor.getJSON();   // structured document
    // send html / json to your API ...
  }
}
Tracked changes demoReview workflows your compliance team will recognize.Real-time collab demoTwo editors syncing through per-node Yjs CRDT.Angular starter downloadA complete Angular sample app is in the download bundle.

Why teams pick it for Angular line-of-business apps

  • Everything is included: AI Toolkit (bring your own key), per-node Yjs CRDT collaboration, tracked changes, comments, and revision history ship in the same license — no premium add-on tiers.
  • Clean HTML out: publish-ready markup plus a structured JSON model, with server-side rendering helpers (renderHTML) exported from the same Angular entry.
  • Perpetual license from $129: no subscription and no per-seat AI pricing — see pricing and the TinyMCE / CKEditor comparisons.