ngx-rwriter

ngx-rwriter is a powerful, lightweight, and modern Rich Text Editor for Angular 21+. It provides a familiar, Word-like interface with native support for images, videos, alignment, and formatting.

Features

• Formatting: Bold, Italic, Underline, Paragraph Styles (P, H1-H4), Font Family selection, and Text/Background Color pickers.
• Lists: Bulleted (<ul>) and Numbered (<ol>) lists.
• Alignment: Left, Center, Right, and Justified alignment for text, images, and videos.
• Video Support:
  • YouTube: Paste standard or shortened YouTube URLs.
  • Direct Links: Support for .mp4, .webm, and .ogg files.
  • Visual Resizing: Click a video to reveal handles and resize it directly.
• Image Support:
  • Drag-and-drop or select images.
  • Visual Resizing: Click an image to reveal handles and resize it directly.
  • Flexible Uploads: Choose between automatic Base64 encoding or custom server-side uploads.
• Links: Modern custom palette for inserting hyperlinks.
• Form Support: Fully compatible with ngModel and Reactive Forms (formControl, formControlName).
• Clean Output: Generates clean, semantic HTML.

Installation

npm i @reiagaru/ngx-rwriter

Basic Usage

1. Import the Component

Since ngx-rwriter is a standalone component, you can import it directly into your component or module.

import { NgxRwriter } from '@reiagaru/ngx-rwriter';
import { FormsModule } from '@angular/forms';

@Component({
  standalone: true,
  imports: [NgxRwriter, FormsModule],
  template: `
    <ngx-rwriter [(ngModel)]="htmlContent"></ngx-rwriter>
  `
})
export class MyComponent {
  htmlContent = '<p>Hello World!</p>';
}

Rendering Output (Fixing Broken Styles)

Rich text editors generate raw HTML tags (like <p>, <ul>, <h1>) that often lose their default styling when placed in an Angular app—especially if you use a framework like Tailwind CSS that aggressively resets defaults (Preflight).

Furthermore, Angular's default HTML sanitization strips out inline CSS styles (like text highlighting and background colors) used by the editor.

To solve both of these issues, ngx-rwriter provides a dedicated standalone Viewer component. It automatically isolates the HTML from global CSS resets and securely renders the inline styles.

Using the Viewer Component

Import the <ngx-rwriter-viewer> standalone component and pass your backend HTML string to the [content] input.

import { NgxRwriterViewer } from '@reiagaru/ngx-rwriter';

@Component({
  standalone: true,
  imports: [NgxRwriterViewer],
  template: `
    <ngx-rwriter-viewer 
      [content]="savedNewsHtml" 
      theme="auto">
    </ngx-rwriter-viewer>
  `
})
export class NewsArticleComponent {
  // This string from your backend will render safely with all colors and margins intact
  savedNewsHtml = '<h1 style="background-color: yellow;">My Article</h1><p>...</p>';
}

Documentation

Inputs

Property	Type	Default	Description
imageConfig	ImageUploadConfig	{ mode: 'base64' }	Configuration for how images are handled when inserted.
translations	RwriterTranslations	RW_EN	Dictionary for overriding tooltip/placeholder text.
theme	'auto' | 'light' | 'dark'	'auto'	Switches the editor interface theme. Auto uses OS preference.
height	string	undefined	Optional fixed height for the editor area (e.g. '500px').

Internationalization (i18n)

ngx-rwriter provides a scalable translation input. It ships with built-in dictionaries for English, Russian, and Kazakh.

import { NgxRwriter, RW_RU, RW_EN, RW_KK } from '@reiagaru/ngx-rwriter';

@Component({
  standalone: true,
  imports: [NgxRwriter],
  template: `
    <ngx-rwriter [translations]="currentLang"></ngx-rwriter>
  `
})
export class MyComponent {
  // Use built-in Russian dictionary
  currentLang = RW_RU; 
}

Advanced Media Features

Resizing

Simply click on any image or video inside the editor. A blue dashed box with handles will appear. Drag the handles to resize the element.

Alignment

While a media element is selected, using the alignment buttons (Left, Center, Right) will apply specific styles:

• Left/Right: Floats the element and allows text to wrap around it.
• Center: Displays the element as a block centered on the page.

CSS Overrides

Class	Description
.rwriter-container	The outermost wrapper of the entire component.
.dark-theme	Applied to the container when theme is dark.
.rwriter-toolbar	The toolbar container holding all buttons.
.input-palette	The custom dropdown for Link and Video URLs.
.rwriter-editor	The actual contenteditable area.
.image-resizer-overlay	The resize handles overlay.

License

MIT