Syncfusion react rich text editor

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

// src/App.css - add CSS imports
// @import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
// @import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css';
// @import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css';
// @import '../node_modules/@syncfusion/ej2-lists/styles/tailwind3.css';
// @import '../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css';
// @import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css';
// @import '../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css';
// @import '../node_modules/@syncfusion/ej2-richtexteditor/styles/tailwind3.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
Toolbar	Toolbar rendering and commands
HtmlEditor	HTML editing mode (default)
MarkdownEditor	Markdown editing mode
Link	Hyperlink insert/edit/remove
Image	Image insertion and management
Video	Video insertion
Audio	Audio insertion
Table	HTML table insert/edit
QuickToolbar	Floating toolbar for images/links
PasteCleanup	Clean up pasted content formatting
ClipboardCleanup	Clean clipboard on copy/cut
FileManager	File browser for server-side images
Resize	Resizable editor area
Count	Character count display
EmojiPicker	Emoji search and insert
SlashMenu	Slash / command menu
ImportExport	Import Word, export Word/PDF
CodeBlock	Inline code block formatting
AutoFormat	Auto-convert Markdown syntax while typing
FormatPainter	Copy-paste text formatting
AIAssistant	AI assistant integration

Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Installation, npm setup, CSS imports
• Basic component implementation
• Module injection patterns
• Toolbar configuration basics
• Running the application

Editor Modes

📄 Read: references/editor-modes.md

• HTML editor mode (default WYSIWYG)
• Markdown editor mode with preview
• IFrame vs DIV mode
• Inline editing
• Resizable editor

Toolbar Configuration

📄 Read: references/toolbar-configuration.md

• Default toolbar items
• Toolbar types: Expand, MultiRow, Scrollable
• Toolbar position (top/bottom)
• Sticky/floating toolbar
• Quick toolbar for images and links

Toolbar Tools

📄 Read: references/toolbar-tools.md

• 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

📄 Read: references/insert-media.md

• Inserting images (URL, upload, base64)
• Video insertion and configuration
• Audio insertion
• File browser integration

Inserting Content

📄 Read: references/insert-content.md

• Tables: insert, resize, merge cells
• Hyperlinks: create, edit, open in new tab
• Code blocks
• Custom format blocks

Smart Editing Features

📄 Read: references/smart-editing.md

• Emoji picker
• Slash menu (type / to open)
• Mentions (tag users)
• Mail merge

Managing Editor Value

📄 Read: references/editor-value.md

• 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

📄 Read: references/paste-clipboard.md

• Paste cleanup configuration
• Clipboard cleanup on copy/cut
• Executing editor commands programmatically

Validation & Security

📄 Read: references/validation-security.md

• Form support and submission
• XHTML validation
• Read-only mode
• XSS prevention

AI Assistant

📄 Read: references/ai-assistant.md

• AI integration setup
• AI assistant properties
• Customizing AI toolbar and responses

Accessibility & Globalization

📄 Read: references/accessibility.md

• WCAG 2.1 compliance
• Keyboard shortcuts
• Globalization, localization, RTL
• Style encapsulation

Styling & Customization

📄 Read: references/styling-customization.md

• CSS variable customization
• Style encapsulation (shadow DOM)
• Third-party integrations (CodeMirror, Mention library)
• Spell/grammar check

Undo / Redo

📄 Read: references/undo-redo.md

• Undo/redo manager behavior
• Keyboard shortcuts
• Programmatic undo/redo

Enter Key & Selection

📄 Read: references/enter-key-selection.md

• Enter key configuration (P, BR, DIV)
• Selection API
• Cursor positioning

Events

📄 Read: references/events.md

• 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

📄 Read: references/methods.md

• 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

📄 Read: references/properties.md

• 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

📄 Read: references/how-to.md

• 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); // HTML string
  };
  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>