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

bash

npm install @syncfusion/ej2-react-richtexteditor

tsx

// 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

tsx

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

tsx

const [content, setContent] = useState('<p>Hello</p>');
<RichTextEditorComponent value={content} change={(e) => setContent(e.value)}>
  <Inject services={[Toolbar, HtmlEditor]} />
</RichTextEditorComponent>

Markdown mode

tsx

import { MarkdownEditor } from '@syncfusion/ej2-react-richtexteditor';
<RichTextEditorComponent editorMode="Markdown">
  <Inject services={[Toolbar, MarkdownEditor]} />
</RichTextEditorComponent>

syncfusion-react-rich-text-editor

NPX Install

Tags

SKILL.md Content