Skip to main content Home Creators syncfusion react-ui-components-skills syncfusion-react-rich-text-editor
syncfusion-react-rich-text-editor Implements the Syncfusion React Rich Text Editor (RichTextEditorComponent) from ej2-react-richtexteditor, supporting HTML (WYSIWYG) and Markdown editing. 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 React 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/react-ui-components-skills --skill syncfusion-react-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-react-rich-text-editor description Implements the Syncfusion React Rich Text Editor (RichTextEditorComponent) from ej2-react-richtexteditor, supporting HTML (WYSIWYG) and Markdown editing. 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 React applications. metadata {"author":"Syncfusion Inc","version":"34.1.29","category":"File Viewers & Editors"}
Syncfusion React Rich Text Editor
A WYSIWYG (What You See Is What You Get) editor for creating and formatting rich content as HTML or Markdown. Supports toolbars, media insertion, AI assistance, smart editing features, form validation, and deep customization.
When to Use This Skill
Setting up a rich text / WYSIWYG editor in a React app
Configuring toolbar items, types, or positions
Switching between HTML and Markdown editor modes
Inserting images, video, audio, or files
Working with smart editing features: emoji, slash menu, mentions, mail merge
Integrating AI assistant into the editor
Handling editor value: get, set, two-way binding, auto-save, import/export
Applying paste cleanup, form validation, or read-only mode
Customizing styles, accessibility, or keyboard shortcuts
Quick Start
npm install @syncfusion/ej2-react-richtexteditor
npm install @syncfusion/ej2-tailwind3-theme
src/App.css - add CSS imports
@import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/rich-text-editor/index.css'
import './App.css' ;
import {
HtmlEditor , Image , Inject , Link ,
QuickToolbar , RichTextEditorComponent , Toolbar
} from '@syncfusion/ej2-react-richtexteditor' ;
function App (return (
<RichTextEditorComponent height ={450} >
<Inject services ={[Toolbar, Image , Link , HtmlEditor , QuickToolbar ]} />
</RichTextEditorComponent > export default App ;
Module Injection Reference Inject only the modules your app needs — this keeps the bundle lean.
Module What it enables ToolbarToolbar rendering and commands HtmlEditorHTML editing mode (default) MarkdownEditorMarkdown editing mode LinkHyperlink insert/edit/remove ImageImage insertion and management VideoVideo insertion AudioAudio insertion TableHTML table insert/edit QuickToolbarFloating toolbar for images/links PasteCleanupClean up pasted content formatting ClipboardCleanupClean clipboard on copy/cut FileManagerFile browser for server-side images ResizeResizable editor area CountCharacter count display EmojiPickerEmoji search and insert SlashMenuSlash / command menu ImportExportImport Word, export Word/PDF CodeBlockInline code block formatting AutoFormatAuto-convert Markdown syntax while typing FormatPainterCopy-paste text formatting AIAssistantAI assistant integration
Navigation Guide
Getting Started
Installation, npm setup, CSS imports
Basic component implementation
Module injection patterns
Toolbar configuration basics
Running the application
Editor Modes
HTML editor mode (default WYSIWYG)
Markdown editor mode with preview
IFrame vs DIV mode
Inline editing
Resizable editor
Toolbar Configuration
Default toolbar items
Toolbar types: Expand, MultiRow, Scrollable
Toolbar position (top/bottom)
Sticky/floating toolbar
Quick toolbar for images and links
Toolbar Tools
Built-in tools reference (Bold, Italic, Formats, etc.)
Custom toolbar items with templates
Text formatting tools
Styling tools (font, color, alignment)
Fullscreen tool
Inserting Media
Inserting images (URL, upload, base64)
Video insertion and configuration
Audio insertion
File browser integration
Inserting Content
Tables: insert, resize, merge cells
Hyperlinks: create, edit, open in new tab
Code blocks
Custom format blocks
Smart Editing Features
Emoji picker
Slash menu (type / to open)
Mentions (tag users)
Mail merge
Managing Editor Value
Setting initial value
Getting value via property, event, or method
Two-way binding with React state
Auto-save with saveInterval
Import/export Word and PDF
Markdown preview
Character count and maxLength
Source code view
Paste & Clipboard
Paste cleanup configuration
Clipboard cleanup on copy/cut
Executing editor commands programmatically
Validation & Security
Form support and submission
XHTML validation
Read-only mode
XSS prevention
AI Assistant
AI integration setup
AI assistant properties
Customizing AI toolbar and responses
Accessibility & Globalization
WCAG 2.1 compliance
Keyboard shortcuts
Globalization, localization, RTL
Style encapsulation
Styling & Customization
CSS variable customization
Style encapsulation (shadow DOM)
Third-party integrations (CodeMirror, Mention library)
Spell/grammar check
Undo / Redo
Undo/redo manager behavior
Keyboard shortcuts
Programmatic undo/redo
Enter Key & Selection
Enter key configuration (P, BR, DIV)
Selection API
Cursor positioning
Events
Infer EventArgs Type value for each events
Lifecycle events: created, destroyed, focus, blur
Content change: change event with ChangeEventArgs
Action events: actionBegin (cancelable), actionComplete
Toolbar events: toolbarClick, updatedToolbarStatus
Dialog & popup events: beforeDialogOpen/Close, beforePopupOpen/Close
Media & file events: image/audio/video upload, select, remove, drop
Paste & clipboard events: beforePasteCleanup, afterPasteCleanup
AI Assistant events: aiAssistantPromptRequest, aiAssistantToolbarClick
Resize, slash menu, selection, quick toolbar, import/export events
Methods
Focus & content: focusIn, focusOut, getHtml, getText, getSelectedHtml
Toolbar: enableToolbarItem, disableToolbarItem, removeToolbarItem
Dialog: showDialog, closeDialog with DialogType enum
Selection: selectAll, getRange, selectRange
Undo/redo: clearUndoRedo
AI Assistant: executeAIPrompt, addAIPromptResponse, getAIPromptHistory, clearAIPromptHistory
Utility: executeCommand (all CommandName values), sanitizeHtml, destroy
Properties Reference
Core: height, width, enabled, readonly, placeholder, cssClass
Toolbar: toolbarSettings, quickToolbarSettings, floatingToolbarOffset
Editor mode & behavior: editorMode, iframeSettings, inlineMode, enterKey
Value & content: value, maxLength, showCharCount, saveInterval, enableHtmlSanitizer
Media: insertImageSettings, insertVideoSettings, insertAudioSettings, fileManagerSettings
Font, color & format: fontFamily, fontSize, fontColor, backgroundColor, format, codeBlockSettings
Paste: pasteCleanupSettings, enableClipboardCleanup
AI Assistant: aiAssistantSettings (full configuration reference)
Import/export: importWord, exportWord, exportPdf
Misc: undoRedoSteps, keyConfig, slashMenuSettings, emojiPickerSettings
How-To Guides
Capture Ctrl keys to update value
Change default font family
Check uploaded image size
Customize placeholder style
Customize shortcut keys
File attachment
Format code blocks
Position cursor at end of content
Rename images on server
RTE inside Dialog or Tab
Set cursor at specific range
Tailwind preflight fix
Update value programmatically
Common Patterns
Read value on change import { ChangeEventArgs } from '@syncfusion/ej2-react-richtexteditor' ;
function App (const onChange = (args : ChangeEventArgs console .log (args.value );
};
return (
<RichTextEditorComponent change ={onChange} >
<Inject services ={[Toolbar, HtmlEditor ]} />
</RichTextEditorComponent >
Controlled value with React state const [content, setContent] = useState ('<p>Hello</p>' );
<RichTextEditorComponent value ={content} change ={(e) => setContent(e.value)}>
<Inject services ={[Toolbar, HtmlEditor ]} />
</RichTextEditorComponent >
Markdown mode import { MarkdownEditor } from '@syncfusion/ej2-react-richtexteditor' ;
<RichTextEditorComponent editorMode ="Markdown" >
<Inject services ={[Toolbar, MarkdownEditor ]} />
</RichTextEditorComponent > More from this repository syncfusion-react-accordion Guide users to implement Syncfusion React Accordion component for collapsible content panels. Use this skill whenever the user needs to create expandable/collapsible sections, accordion layouts, tabbed content panels, multi-step forms, FAQs, or navigation with expandable items. Covers component setup, expand modes, animations, dynamic content loading, styling, events, lifecycle, React hooks integration, and complete API reference.
Create responsive navigation headers with AppBar component. Build top, bottom, or sticky app bars with buttons, menus, icons, and sidebars. Use when building navigation elements, toolbars, action bars, or responsive headers with dynamic content layout. Includes color modes (Light, Dark, Primary, Inherit), size modes (Regular, Prominent, Dense), spacing, separators, and full accessibility support.
syncfusion-react-breadcrumb Implement and configure Syncfusion React Breadcrumb component for navigation paths, routing, and site hierarchy. Use this skill whenever users need breadcrumb navigation, want to create hierarchical navigation paths, display location breadcrumbs, handle navigation between pages, customize overflow behaviors, or integrate breadcrumbs with routing libraries.
Related occupations SOC
Based on SOC occupation classification
