Skip to main content Home Creators syncfusion angular-ui-components-skills syncfusion-angular-rich-text-editor
syncfusion-angular-rich-text-editor Implements the Syncfusion Angular Rich Text Editor (ejs-richtexteditor) from @syncfusion/ej2-angular-richtexteditor using RichTextEditorModule, HtmlEditorService, and MarkdownEditorService.Use this skill for toolbar configuration, image/video/audio insertion, paste cleanup, AI assistant integration, emoji picker, slash menu, mentions, import/export Word/PDF, form validation, and source code view in Angular applications.
Jump to install Skills Marketplace Discover and explore AI skills built by the community.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Show prompt details A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/syncfusion/angular-ui-components-skills --skill syncfusion-angular-rich-text-editorThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Download Zip Downloading... More from this repository syncfusion-angular-calendars Comprehensive guide for implementing Syncfusion Angular Calendar components including Calendar, DatePicker, DateRangePicker, DateTimePicker, and TimePicker. Covers installation, data binding, date/time selection, range selection, formatting, localization, masking, validation, customization, templates, accessibility, and controlled component patterns in Angular applications.
syncfusion-angular-data-manager Implements Syncfusion Angular DataManager for local/remote binding, CRUD, querying, caching, and middleware. Supports JsonAdaptor, ODataAdaptor, ODataV4Adaptor, UrlAdaptor, WebApiAdaptor, WebMethodAdaptor, RemoteSaveAdaptor, GraphQLAdaptor, CustomDataAdaptor, and CustomAdaptor. Covers Query class, filtering, sorting, paging, grouping, persistence, offline mode, caching, and error handling.
Implements Syncfusion Angular Grid component for feature-rich data tables and grids. Use this when working with data display, sorting, filtering, grouping, aggregates, editing, or exporting. This skill covers grid configuration, CRUD operations, virtual scrolling or infinite scrolling, hierarchy grids, state persistence, and advanced data management features for data-intensive applications.
Related occupations SOC
Based on SOC occupation classification
name syncfusion-angular-rich-text-editor description Implements the Syncfusion Angular Rich Text Editor (ejs-richtexteditor) from @syncfusion/ej2-angular-richtexteditor using RichTextEditorModule, HtmlEditorService, and MarkdownEditorService.Use this skill for toolbar configuration, image/video/audio insertion, paste cleanup, AI assistant integration, emoji picker, slash menu, mentions, import/export Word/PDF, form validation, and source code view in Angular applications. metadata {"author":"Syncfusion Inc","version":"34.1.29","category":"File Viewers & Editors"}
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 applicationHTML or Markdown Output : Capture formatted content as HTML or MarkdownMedia-Rich Editors : Allow image, audio, video, and file insertionAI-Assisted Writing : Integrate AI content generation into the editorSmart Editing Features : Add mentions, emoji picker, slash commands, or mail mergeCustom Toolbar : Configure, extend, or restrict toolbar items and toolsForm Integration : Use RTE with Angular Reactive or Template-driven formsDocument 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 npm install @syncfusion/ej2-angular-richtexteditor
npm install @syncfusion/ej2-material3-theme
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>' ;
}
@import '../node_modules/@syncfusion/ej2-material3-theme/styles/rich-text-editor/index.css' ;
Documentation and Navigation Guide
Getting Started When to read: First-time setup, installation, basic implementation, module injection
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 When to read: Choosing the right editor rendering mode
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 When to read: Customizing toolbar layout, position, or items
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 When to read: Working with text formatting, custom toolbar items, or fullscreen
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 When to read: Handling media insertion, uploads, or the file browser
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 When to read: Working with tables or hyperlinks inside the editor
Inserting and configuring tables
Table resize, merge, split cells, add/remove rows and columns
Table styles and borders
Link insertion and editing
insertLink dialog configurationOpening links in new tab, link validation
Editor Value, Selection & Commands When to read: Programmatically reading/writing content or controlling the editor
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 When to read: Configuring editor behavior, appearance, or feature settings
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 When to read: Calling programmatic APIs to control the editor
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)
Events — Core When to read: Handling lifecycle, action, content change, selection, dialog, popup, quick toolbar, or resize events
Lifecycle events (created, destroyed, focus, blur)
Action events (actionBegin, actionComplete)
Content change events (change)
Selection events (selectionChanged)
Dialog events (beforeDialogOpen, dialogOpen, beforeDialogClose, dialogClose)
Popup events (beforePopupOpen, beforePopupClose)
Quick toolbar events (beforeQuickToolbarOpen, quickToolbarOpen, quickToolbarClose)
Resize events (resizeStart, resizing, resizeStop)
Events — Media, Upload & Toolbar When to read: Handling AI assistant, media, paste/clipboard, toolbar, upload, or import/export events
AI Assistant events (aiAssistantPromptRequest, aiAssistantStopRespondingClick, aiAssistantToolbarClick)
Media events (afterImageDelete, afterMediaDelete, beforeImageDrop, beforeMediaDrop)
Paste and clipboard events (beforePasteCleanup, afterPasteCleanup, beforeClipboardWrite)
Toolbar events (toolbarClick, updatedToolbarStatus, slashMenuItemSelect)
Upload events — image lifecycle (beforeImageUpload, imageUploading, imageUploadSuccess, imageUploadFailed, imageSelected, imageRemoving)
Upload events — media lifecycle (beforeFileUpload, fileUploading, fileUploadSuccess, fileUploadFailed, fileSelected, fileRemoving)
Document import/export events (documentExporting, wordImporting)
Smart Editing Features When to read: Adding mentions, emoji, slash commands, or mail merge
Mentions (@user) — configuration and data source
Emoji picker — enabling and customizing
Slash command menu — enabling / trigger commands
Mail merge — inserting merge fields into content
Combining multiple smart editing features
AI Assistant Integration When to read: Integrating AI content generation into the editor
AI AssistView integration overview
AIAssistantService injectionConfiguring AI properties (endpoint, model, prompts)
Custom AI prompt handling in Angular
Toolbar AI button setup
AI content generation and insertion workflow
Clipboard and Paste Cleanup When to read: Controlling what happens when content is pasted into the editor
PasteCleanupService — enabling paste cleanupAllowing/denying specific HTML tags and attributes
Cleaning up Word and Excel paste formatting
ClipboardCleanupService for copy/cut cleanupafterPasteCleanup event handlingConfiguring paste as plain text
Styling and Accessibility When to read: Customizing editor appearance or ensuring accessibility compliance
CSS class customization and theming
Style encapsulation in IFrame mode
Custom placeholder styling
WCAG 2.1 compliance overview
Keyboard navigation and shortcuts
ARIA attributes and screen reader support
Focus management
Globalization and Localization When to read: Supporting multiple languages, RTL, or locale-specific formatting
Localization setup with L10n
RTL (Right-to-Left) support
Custom locale string overrides
Date and number formatting within the editor
Import, Export & Spell Check When to read: Importing Word documents or exporting editor content, or adding spell/grammar check
ImportExportService injectionImporting from Word documents
Exporting to PDF, HTML, or Word
Spell check integration
Grammar check integration
Web Spell Checker plugin setup
Validation and Security When to read: Using the editor in forms or enforcing content security
Form validation with Angular Reactive forms
Form validation with Template-driven forms
XHTML validation
Read-only mode
Content sanitization
XSS prevention strategies
Integrations and How-To When to read: Integrating third-party libraries or solving common configuration scenarios
CodeMirror source-code editor integration
HighlightJS syntax highlighting for code blocks
Embedly rich media preview integration
Tailwind CSS preflight conflict fix
Adding Google Fonts to font picker
File attachments support
RTE inside Angular Dialog component
RTE inside Angular Tab component
Changing default font family
Formatting code blocks
Common Patterns
Two-Way Value Binding
<ejs-richtexteditor [(value)]="htmlContent" ></ejs-richtexteditor>
public htmlContent : string = '<p>Initial content</p>' ;
One-Way Binding + Change Event <ejs-richtexteditor [value]="htmlContent" (change)="onChange($event)" >
</ejs-richtexteditor>
onChange (args : ChangeEventArgs ): void {
this .htmlContent = args.value ;
}
Using with Reactive Forms import { FormControl , ReactiveFormsModule } from '@angular/forms' ;
<ejs-richtexteditor formControlName ="content" > </ejs-richtexteditor > this .form = new FormGroup ({
content : new FormControl ('<p></p>' , Validators .required )
});
Key Services Reference Service What it enables ToolbarServiceToolbar rendering and item management HtmlEditorServiceHTML editing mode MarkdownEditorServiceMarkdown editing mode LinkServiceHyperlink insertion and editing ImageServiceImage insertion and management TableServiceTable insertion and editing QuickToolbarServiceFloating context toolbars FileManagerServiceFile browser dialog PasteCleanupServicePaste content sanitization ResizeServiceEditor resizing handle ImportExportServiceWord/PDF import and export AIAssistantServiceAI assistant integration EmojiPickerServiceEmoji picker dialog SlashMenuService/ slash command menuCodeBlockServiceInline code block formatting AudioServiceAudio insertion VideoServiceVideo insertion FormatPainterServiceFormat painting (copy/apply styles) ClipboardCleanupServiceCopy/cut clipboard cleanup AutoFormatServiceAuto Markdown-to-HTML conversion
Related Skills 