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.

• 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.

npm i @reiagaru/ngx-rwriter

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>';
}

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.

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>';
}

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; 
}

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.

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.

MIT