Skip to main content Home Creators syncfusion javascript-ui-controls-skills syncfusion-javascript-rich-text-editor
syncfusion-javascript-rich-text-editor Implements the Syncfusion Rich Text Editor and Markdown Editor using TypeScript (ej2-richtexteditor). Supports both HTML (WYSIWYG) and Markdown modes via editorMode on a single RichTextEditor class. Use this skill for toolbar setup, image/media/table handling, inline or iframe editing, AI assistant, smart editing, import/export, and all content editor scenarios.
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/javascript-ui-controls-skills --skill syncfusion-javascript-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... name syncfusion-javascript-rich-text-editor description Implements the Syncfusion Rich Text Editor and Markdown Editor using TypeScript (ej2-richtexteditor). Supports both HTML (WYSIWYG) and Markdown modes via editorMode on a single RichTextEditor class. Use this skill for toolbar setup, image/media/table handling, inline or iframe editing, AI assistant, smart editing, import/export, and all content editor scenarios. metadata {"author":"Syncfusion Inc","version":"34.1.29","category":"File Viewers & Editors"}
Implementing Syncfusion Rich Text Editor
A unified skill for implementing the Syncfusion Rich Text Editor (RTE) and Markdown Editor in TypeScript. Both editors share the same RichTextEditor class and @syncfusion/ej2-richtexteditor package — the only difference is the editorMode property and which feature module you inject.
Editor Mode Decision Guide
User wants WYSIWYG / formatted HTML content? → Use editorMode: 'HTML' (default), inject HtmlEditor
User wants markdown / plain text with preview? → Use editorMode: 'Markdown', inject MarkdownEditor
User wants iframe isolation? → Add iframeSettings: { enable: true } to HTML mode
User wants inline editing? → Add inlineMode: { enable: true } to HTML mode
When to Use This Skill
Use this skill when the user needs to:
Build a rich text / WYSIWYG editor for blog posts, comments, emails, CMS content
Build a markdown editor with live preview for documentation, note-taking, developer tools
Customize the toolbar — add/remove items, change layout, add custom tools
Insert media — images, audio, video, file browser integration
Enable smart editing — @mention, slash commands, emoji picker, mail merge
Add AI writing assistance to the editor
Handle editor value — get/set HTML or markdown content, auto-save, character count
Work with tables and links inside the editor
Configure validation — form integration, XHTML validation, read-only mode
Style or theme the editor — fonts, colors, CSS customization
Import/export content — Word/PDF/Markdown import and exportTrigger keywords: RichTextEditor, MarkdownEditor, editorMode, WYSIWYG, rich text, markdown editor, content editor, text formatting, ej2-richtexteditor, HtmlEditor, inline editor, iframe editor
Navigation Guide
Getting Started
Package installation and CSS imports
Module injection (HtmlEditor vs MarkdownEditor)
HTML editor initialization
Markdown editor initialization
Toolbar configuration at setup
Feature module reference table
Editor Modes & Types
HTML mode vs Markdown mode decision
Iframe editor (style-isolated editing)
Inline editing (toolbar appears on selection)
Resizable editor
editorMode API and switching modes
Toolbar Configuration
Toolbar types: Expand, MultiRow, Scrollable, Popup
Toolbar position: Top / Bottom
Sticky (floating) toolbar
Quick toolbars for image, link, table, audio, video, text
Separator usage (| and -)
Tools (Built-in & Custom)
Complete built-in tools catalog (text, font, alignment, lists, etc.)
Adding and removing toolbar tools
Creating custom toolbar commands
Enabling / disabling toolbar items programmatically
Text formatting, styling, fullscreen tools
Editor Value (Get/Set/Save)
Set initial content with value / valueTemplate
Get HTML content: editor.value, getHtml(), getText()
Change events and auto-save (saveInterval)
Character count and max length
Encoded HTML output (enableHtmlEncode)
Source code editing (SourceCode tool)
Placeholder text
Insert Image & Media
Insert images (URL, upload, drag-drop)
Insert audio and video
File browser integration
Upload configuration (server upload, rename)
Image/media quick toolbar
Tables
Creating tables (toolbar, programmatic)
Table quick toolbar operations
Cell properties, alignment, merge/split
Table style customization
Links
Insert hyperlinks
Link quick toolbar (Open, Edit, Remove)
Auto-linking URLs
Smart Editing
@mention integration
Slash menu / slash commands
Emoji picker
Mail merge with dynamic placeholders
AI Assistant
Integrating AI assistant panel
AI assistant properties and configuration
Customizing AI suggestions UI
Markdown-Specific Features
Supported markdown syntax (headings, lists, bold, italic, etc.)
Custom markdown format definitions
Live markdown preview (split-pane)
Insert image / table in markdown mode
Mention support in markdown mode
Toolbar items specific to markdown
Content Operations
Code block support
Text selection API
Clipboard cleanup
Paste cleanup (Word paste, HTML cleanup)
Undo/redo configuration
Execute command programmatically (executeCommand)
Enter key configuration (P, BR, DIV)
Import & Export
Import Word/HTML documents into the editor
Export editor content to Word / PDF
Markdown import/export
Style & Appearance
CSS customization and cssClass
Style encapsulation
Adding custom Google fonts
Spell and grammar check
Globalization (RTL, localization)
Tailwind CSS preflight workarounds
Default font configuration
Placeholder text styling
Validation & Security
HTML form integration with RTE
XHTML validation and XSS prevention
Read-only mode
How-To Scenarios
RTE inside Dialog
RTE inside Tab control
File attachment support
File size restrictions
Format code blocks
Custom shortcut keys
Save functionality
Cursor position control
Rename images on server
Properties Reference
Complete list of all RichTextEditor properties with types, defaults, and descriptions
Sub-type details for complex model properties (toolbar, image, table, font, color, AI assistant, etc.)
Code examples for key properties
Methods Reference
Complete list of all public instance methods with signatures and return types
Parameter details and usage examples
executeCommand with full CommandName enum and argument interfacesStatic Inject method and available module list
Events Reference
Complete list of all component events with types and event argument details
Lifecycle events: created, destroyed, blur, focus, change
Upload events for images, audio, and video
AI Assistant events: aiAssistantPromptRequest, aiAssistantToolbarClick, aiAssistantStopRespondingClick
Toolbar, popup, dialog, quick toolbar, resize, and selection events
Quick Start npm install @syncfusion/ej2-angular-richtexteditor
npm install @syncfusion/ej2-tailwind3-theme
HTML Editor (WYSIWYG)
@import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/rich-text-editor/index.css' ;
import { RichTextEditor , Toolbar , Link , Image , HtmlEditor , QuickToolbar } from '@syncfusion/ej2-richtexteditor' ;
RichTextEditor .Inject (Toolbar , Link , Image , HtmlEditor , QuickToolbar );
const editor = new RichTextEditor ({
toolbarSettings : {
items : ['Bold' , 'Italic' , 'Underline' , '|' , 'Formats' , 'Alignments' ,
'OrderedList' , 'UnorderedList' , '|' , 'CreateLink' , 'Image' , '|' ,
'SourceCode' , 'Undo' , 'Redo' ]
},
value : '<p>Start editing here...</p>'
});
editor.appendTo ('#editor' );
Markdown Editor import { RichTextEditor , Toolbar , Link , Image , MarkdownEditor } from '@syncfusion/ej2-richtexteditor' ;
RichTextEditor .Inject (Toolbar , Link , Image , MarkdownEditor );
const editor = new RichTextEditor ({
editorMode : 'Markdown' ,
toolbarSettings : {
items : ['Bold' , 'Italic' , 'StrikeThrough' , 'InlineCode' , '|' ,
'Formats' , 'Blockquote' , '|' , 'OrderedList' , 'UnorderedList' ,
'CreateLink' , 'Image' , 'CreateTable' , '|' , 'Undo' , 'Redo' ]
},
value : '## Hello Markdown\n\nStart writing here...'
});
editor.appendTo ('#editor' );
Common Patterns
Get editor value on form submit const form = document .getElementById ('myForm' );
form.addEventListener ('submit' , () => {
const content = editor.value ;
console .log (content);
});
Auto-save content const editor = new RichTextEditor ({
saveInterval : 5000 ,
change : (args ) => {
localStorage .setItem ('draft' , args.value );
}
});
Read-only mode
Programmatically set content editor.value = '<p>New content</p>' ;
editor.dataBind ();
Module Injection Reference Feature Module to Inject HTML editing HtmlEditorMarkdown editing MarkdownEditorToolbar ToolbarHyperlinks LinkImages ImageAudio AudioVideo VideoTables TableQuick toolbars QuickToolbarPaste cleanup PasteCleanupCharacter count CountResize ResizeFile manager FileManagerMention Mention (from ej2-dropdowns)
Inject only what you need — each module adds to bundle size. Always call RichTextEditor.Inject(...) before new RichTextEditor(...).
More from this repository syncfusion-javascript-data-manager Implements Syncfusion TypeScript/JavaScript(ES6+) 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.
syncfusion-javascript-grid Implements Syncfusion JavaScript 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, hierarchy grids, state persistence, and advanced data management features for data-intensive applications.
syncfusion-javascript-diagram Create and edit visual diagrams with Syncfusion JavaScript Diagram (flowcharts, BPMN, swimlanes, UML, org charts, network topologies). Trigger for diagram rendering, node/connector modeling, layouts, data binding, palettes, interactive tools, exporting, and workflow visualization tasks.
Related occupations SOC
Based on SOC occupation classification
