Localized docs: see repository root — English, Deutsch, Français, Italiano.

@stackch/angular-richtext-editor

Lightweight Angular 20 standalone rich text editor with a reusable toolbar and built‑in i18n.

• Range/Selection API for bold/italic/underline (minimal execCommand fallback)
• Undo/Redo with HTML snapshots and selection restore
• Clean HTML (removes empty spans/styles)
• Toolbar component exported for reuse
• i18n with English defaults and predefined DE/FR/IT bundles

Changelog (English)

• 1.0.3 (2025-10-11)
  • Docs: Add inline changelog in README (npm page), remove link to private GitHub
• 1.0.2 (2025-10-11)
  • Docs: Add Yarn installation examples in README (npm page)
• 1.0.1 (2025-10-11)
  • Package metadata: English description (no code changes)
• 1.0.0 (2025-10-11)
  • Initial public release

Installation

# npm
npm install @stackch/angular-richtext-editor

# Yarn (Berry/Classic)
yarn add @stackch/angular-richtext-editor

# Optional: pin to a specific version
npm install @stackch/[email protected]
yarn add @stackch/[email protected]

Usage

Import the standalone component and bind to a FormControl:

import { Component } from '@angular/core';
import { ReactiveFormsModule, FormControl } from '@angular/forms';
import { StackchRichtextEditor } from '@stackch/angular-richtext-editor';

@Component({
   standalone: true,
   imports: [ReactiveFormsModule, StackchRichtextEditor],
   template: `
      <stackch-richtext-editor
         [showToolbar]="true"
         [fonts]="['Arial, sans-serif', 'Georgia, serif']"
         [fontSizes]="[12, 14, 16, 20, 24]"
         [minHeight]="180"
         [maxHeight]="400"
         [formControl]="content">
      </stackch-richtext-editor>

      <pre>{{ content.value }}</pre>
   `
})
export class DemoComponent {
   content = new FormControl<string | null>('');
}

Inputs:

• placeholder: string – placeholder text
• showToolbar: boolean – show toolbar (default: true)
• fonts: string[] – font family list
• fontSizes: number[] – font sizes (px)
• height?: number – fixed height
• minHeight: number – min height (px)
• maxHeight?: number – max height (px)
• disabled: boolean – disabled state

Outputs:

• valueChange: string – emitted HTML on changes

Note: The component implements ControlValueAccessor and works with formControl/ngModel.

i18n

English is the default. Use config.i18n for partial overrides or import predefined bundles.

import { STACKCH_RTE_I18N_DE, STACKCH_RTE_I18N_FR, STACKCH_RTE_I18N_IT } from '@stackch/angular-richtext-editor';

cfg = {
   // i18n: undefined, // English defaults
   // i18n: STACKCH_RTE_I18N_DE,
   // i18n: STACKCH_RTE_I18N_FR,
   // i18n: STACKCH_RTE_I18N_IT,
};

Customize a few strings:

cfg = { i18n: { boldTitle: 'Strong', colorsTitle: 'Palette' } };

For localized documentation (DE/FR/IT), see the repository README files.