ngx-rich-editor — v2

A free, full-featured, beautifully designed rich text editor for Angular 17+. No external runtime dependencies, no commercial licensing — just install and use.

What's new in v2.2.0

• New: font family dropdown with 20 popular faces (Arial, Helvetica, Verdana, Tahoma, Trebuchet MS, Calibri, Segoe UI, Times New Roman, Georgia, Garamond, Courier New, Consolas, Comic Sans MS, Impact, Roboto, Open Sans, Lato, Montserrat, Poppins, plus Default). Each is previewed in its own typeface and uses a full fallback stack.
• New: font size dropdown from 8pt to 36pt (8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 32, 36). Applied as real CSS point sizes, not the legacy 1-7 scale.
• Both dropdowns auto-detect and display the family / size under the cursor, respect the current text selection, and can be toggled off via the fontFamily / fontSize toolbar config keys.

What's new in v2.1.2

• Fixed: the Insert link / Insert image popups appeared but the URL field could not be typed into. The panel's mousedown handler was calling preventDefault() unconditionally, which stopped the input from receiving focus. It now only prevents default for non-interactive areas, so the field is fully editable. The URL field also auto-focuses when the popup opens.

What's new in v2.1.1

• Fixed: table cell borders were invisible because tables are created at runtime and bypassed Angular's view-encapsulation CSS scoping. Borders are now applied two ways for guaranteed visibility: inline styles on each cell (encapsulation-proof) plus ::ng-deep CSS for the themed frame, header, striping and focus ring.

What's new in v2.1

• Fixed: toolbar buttons now register clicks anywhere, including directly on the icon (pointer-events pass-through)
• Fixed: table cells now always show clear borders — rounded outer frame, header underline, zebra striping, hover highlight, and an accent focus ring on the active cell
• Improved: colors, links and images now correctly apply to the text you had selected before opening the panel (selection is saved/restored)
• Improved: inserting a link with no selection drops in the URL as clickable text instead of doing nothing
• Improved: "Clear formatting" no longer destroys your current block (heading/quote) — it only clears inline styles

What's new in v2

• All-new design language — warm neutrals, indigo accent, soft elevation, refined spacing
• SVG icon system — 30+ hand-crafted 16px line icons (no more emoji)
• Inter + Fraunces typography — Inter for UI, Fraunces (serif) for display headings & blockquotes
• Custom block-format dropdown with live styled previews of each heading
• Curated color palette — 32 hand-picked swatches in an 8-column grid + custom picker
• Inline link & image panels with proper validation (auto-adds https://)
• Improved table picker — 6×8 grid with live preview, plus inline row/column actions
• Status bar with live word + character counts
• Tooltips on every button with keyboard hints
• Polished dark mode with proper elevation tokens
• Smooth panel animations (160ms cubic-bezier ease-out)
• Better blockquotes, code blocks, tables, links in the content area
• Escape key closes any open panel; outside-click handler everywhere

All features

Standalone Angular 17+ component · Reactive Forms & ngModel via ControlValueAccessor · Bold, italic, underline, strikethrough, sub/superscript · H1–H6, paragraph, blockquote, code block, horizontal rule · Bulleted & numbered lists with indent/outdent · Left/center/right/justify alignment · Text & highlight colors · Links & images via inline panels · Tables with size picker, row/column add & delete, Tab navigation · Undo/Redo · HTML source view · Fullscreen mode · Light & dark themes · Paste sanitization · Configurable toolbar.

Installation

npm install @adityaromar/ngx-rich-editor

Basic usage

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { NgxRichEditorComponent } from '@adityaromar/ngx-rich-editor';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [FormsModule, NgxRichEditorComponent],
  template: `
    <ngx-rich-editor [(ngModel)]="content" theme="light"></ngx-rich-editor>
  `,
})
export class AppComponent {
  content = '<h1>Hello, world</h1><p>Start writing.</p>';
}

Inputs

| Input | Type | Default | | -------------- | --------------------------------- | ------------------ | | value | string | '' | | placeholder | string | smart default | | minHeight | string | '260px' | | maxHeight | string | '640px' | | theme | 'light' \| 'dark' | 'light' | | toolbar | Partial<EditorToolbarConfig> | all enabled |

Outputs

| Output | Payload | | ---------------- | -------------------------------- | | contentChange | { html: string; text: string } | | focused | void | | blurred | void |

Theming

Override any CSS custom property on the host element:

ngx-rich-editor {
  --re-accent: #ec4899;          /* pink instead of indigo */
  --re-bg-toolbar: #faf5ff;      /* very light lavender */
  --re-font-display: 'Playfair Display', serif;
}

Full token list (all auto-themed for light/dark):

--re-font-ui, --re-font-display, --re-font-mono
--re-bg, --re-bg-elev, --re-bg-toolbar, --re-bg-status
--re-bg-hover, --re-bg-active
--re-fg, --re-fg-muted, --re-fg-faint
--re-border, --re-border-strong
--re-accent, --re-accent-fg
--re-danger, --re-danger-bg
--re-shadow-sm, --re-shadow-md, --re-shadow-lg
--re-radius, --re-radius-sm, --re-radius-btn

Security

Pasted HTML is sanitized: <script>, <iframe>, <style>, <object>, <embed>, <link>, <meta>, on* event attributes, and javascript: URLs are stripped. When rendering editor output elsewhere, still treat it as untrusted HTML and use Angular's DomSanitizer.

License

MIT