@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

``bash

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/angular-richtext-editor@1.1.0
yarn add @stackch/angular-richtext-editor@1.1.0
`

Usage

Import the standalone component and bind to a FormControl:

`ts
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:
[showToolbar]="true"
[fonts]="['Arial, sans-serif', 'Georgia, serif']"
[fontSizes]="[12, 14, 16, 20, 24]"
[minHeight]="180"
[maxHeight]="400"
[formControl]="content">

{{ content.value }}


})
export class DemoComponent {
content = new FormControl('');
}
`

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.

`ts
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:

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

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