syncfusion-angular-rich-text-editor

What this skill does

# Implementing Syncfusion Angular Rich Text Editor

The Syncfusion Angular Rich Text Editor is a full-featured WYSIWYG editor that enables users to create, edit, and format rich text content. It supports HTML and Markdown editing modes, multimedia insertion, AI assistance, smart editing features, and deep customization.

## When to Use This Skill

Use this skill when you need to:
- **Content Editing UI**: Add a rich text / WYSIWYG editor to an Angular application
- **HTML or Markdown Output**: Capture formatted content as HTML or Markdown
- **Media-Rich Editors**: Allow image, audio, video, and file insertion
- **AI-Assisted Writing**: Integrate AI content generation into the editor
- **Smart Editing Features**: Add mentions, emoji picker, slash commands, or mail merge
- **Custom Toolbar**: Configure, extend, or restrict toolbar items and tools
- **Form Integration**: Use RTE with Angular Reactive or Template-driven forms
- **Document Import/Export**: Import from Word or export to PDF/Word

## Component Overview

The `<ejs-richtexteditor>` component from `@syncfusion/ej2-angular-richtexteditor` provides:
- HTML and Markdown editing modes
- Configurable toolbar (expand, multirow, scrollable, popup)
- Image, video, audio, and file insertion with upload support
- Inline, IFrame, and resizable editor variants
- Smart editing: Mentions, Emoji Picker, Slash Menu, Mail Merge
- AI assistant integration
- Import/Export (Word, PDF)
- Full accessibility (WCAG 2.1), keyboard navigation, RTL support
- Multiple themes: Tailwind 3, Material 3, Bootstrap 5, Fluent 2

## Quick Start

```typescript
import { Component } from '@angular/core';
import { RichTextEditorModule } from '@syncfusion/ej2-angular-richtexteditor';
import {
  ToolbarService, LinkService, ImageService,
  HtmlEditorService, QuickToolbarService
} from '@syncfusion/ej2-angular-richtexteditor';

@Component({
  imports: [RichTextEditorModule],
  standalone: true,
  selector: 'app-root',
  template: `<ejs-richtexteditor [(value)]="content"></ejs-richtexteditor>`,
  providers: [ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService]
})
export class AppComponent {
  public content: string = '<p>Start editing here...</p>';
}
```

**CSS (styles.css):**
```css
@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-lists/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-richtexteditor/styles/material3.css';
```

## Documentation and Navigation Guide

### Getting Started
📄 **Read:** [references/getting-started.md](references/getting-started.md)

**When to read:** First-time setup, installation, basic implementation, module injection

**Topics covered:**
- Installing `@syncfusion/ej2-angular-richtexteditor`
- Module imports: `RichTextEditorModule` vs `RichTextEditorAllModule`
- Service injection: all available services and what they unlock
- CSS theme imports (Material3, Tailwind3, Bootstrap5, Fluent2)
- Standalone component vs NgModule setup
- Basic `<ejs-richtexteditor>` with value binding

---

### Editor Types
📄 **Read:** [references/editor-types.md](references/editor-types.md)

**When to read:** Choosing the right editor rendering mode

**Topics covered:**
- Default (DIV-based) editor — standard use case
- IFrame editor — isolated styling, CSS encapsulation
- Inline editing — edit content directly in-page
- Resizable editor — user-resizable editor area
- Switching between HTML mode and Markdown mode
- When to choose each type

---

### Toolbar Configuration
📄 **Read:** [references/toolbar.md](references/toolbar.md)

**When to read:** Customizing toolbar layout, position, or items

**Topics covered:**
- Toolbar types: Expand, MultiRow, Scrollable, Popup (floating)
- Toolbar position: top or bottom
- Quick toolbar (image, link, table context toolbars)
- Configuring `toolbarSettings.items` array
- Disabling or enabling toolbar items dynamically
- Toolbar with separators (`|`) and line breaks

---

### Built-in and Custom Tools
📄 **Read:** [references/tools.md](references/tools.md)

**When to read:** Working with text formatting, custom toolbar items, or fullscreen

**Topics covered:**
- Built-in tools overview (all available tool names)
- Text formatting tools: Bold, Italic, FontName, FontSize, Color, Alignment
- Styling tools: Lists, Indent, Formats
- Fullscreen tool
- Creating custom toolbar tools with commands
- Styling custom tool buttons

---

### Inserting Images, Video, Audio & Files
📄 **Read:** [references/insert-image-media.md](references/insert-image-media.md)

**When to read:** Handling media insertion, uploads, or the file browser

**Topics covered:**
- Image insertion (URL, file upload, base64)
- Server-side upload handler configuration
- Image resize, alignment, and alt text
- Video insertion and embedding
- Audio insertion
- File browser integration (`FileManagerService`)
- Renaming images on server after upload
- Checking image size before insert

---

### Tables and Links
📄 **Read:** [references/table-and-links.md](references/table-and-links.md)

**When to read:** Working with tables or hyperlinks inside the editor

**Topics covered:**
- Inserting and configuring tables
- Table resize, merge, split cells, add/remove rows and columns
- Table styles and borders
- Link insertion and editing
- `insertLink` dialog configuration
- Opening links in new tab, link validation

---

### Editor Value, Selection & Commands
📄 **Read:** [references/editor-value-and-selection.md](references/editor-value-and-selection.md)

**When to read:** Programmatically reading/writing content or controlling the editor

**Topics covered:**
- Getting and setting the HTML value
- Getting and setting Markdown value
- `executeCommand` API (bold, italic, insertHTML, etc.)
- Selection range APIs: `getRange`, `setRange`
- Positioning cursor at specific location
- Capturing keyboard shortcuts to update value
- Undo/redo programmatic control

---

### Properties
📄 **Read:** [references/properties.md](references/properties.md)

**When to read:** Configuring editor behavior, appearance, or feature settings

**Topics covered:**
- AI Assistant configuration (`aiAssistantSettings`)
- Auto-save settings (`autoSaveOnIdle`)
- Color palette configuration (`backgroundColor`, `fontColor`)
- Code block and format lists
- Editor mode settings (`editorMode`, `enterKey`)
- Emoji picker configuration
- Feature flags (enableAutoUrl, enableResize, enableXhtml, etc.)
- Import/Export settings (PDF, Word)
- IFrame and inline mode configuration
- Media insertion settings (image, audio, video)
- Styling properties (cssClass, height, htmlAttributes)
- Toolbar and format configuration
- File manager integration

---

### Methods
📄 **Read:** [references/methods.md](references/methods.md)

**When to read:** Calling programmatic APIs to control the editor

**Topics covered:**
- AI Assistant methods (`addAIPromptResponse`, `clearAIPromptHistory`, `executeAIPrompt`, `getAIPromptHistory`)
- Content retrieval methods (`getHtml`, `getText`, `getXhtml`, `getContent`, `getCharCount`)
- Content manipulation (`executeCommand`, `clearUndoRedo`, `sanitizeHtml`)
- Dialog management (`showDialog`, `closeDialog`)
- Focus management (`focusIn`, `focusOut`)
- Selection methods (`getRange`, `selectRange`, `selectAll`, `getSelection`, `getSelectedHtml`)
- Toolbar management (`enableToolbarItem`, `disableToolbarItem`, `removeToolbarItem`)
- Popup and UI control (`showEmojiPicker`, `showFullScreen`, `showSourceCode`, `showInlineToolbar`, `hideInlineToolbar`, `refreshUI`)
- Component lifecycle (`destroy`)

---

###