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 export

Trigger keywords: RichTextEditor, MarkdownEditor, editorMode, WYSIWYG, rich text, markdown editor, content editor, text formatting, ej2-richtexteditor, HtmlEditor, inline editor, iframe editor

Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• 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

📄 Read: references/editor-modes.md

• 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

📄 Read: references/toolbar.md

• 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)

📄 Read: references/tools.md

• 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)

📄 Read: references/editor-value.md

• 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

📄 Read: references/insert-image-media.md

• Insert images (URL, upload, drag-drop)
• Insert audio and video
• File browser integration
• Upload configuration (server upload, rename)
• Image/media quick toolbar

Tables

📄 Read: references/table.md

• Creating tables (toolbar, programmatic)
• Table quick toolbar operations
• Cell properties, alignment, merge/split
• Table style customization

Links

📄 Read: references/link.md

• Insert hyperlinks
• Link quick toolbar (Open, Edit, Remove)
• Auto-linking URLs

Smart Editing

📄 Read: references/smart-editing.md

• @mention integration
• Slash menu / slash commands
• Emoji picker
• Mail merge with dynamic placeholders

AI Assistant

📄 Read: references/ai-assistant.md

• Integrating AI assistant panel
• AI assistant properties and configuration
• Customizing AI suggestions UI

Markdown-Specific Features

📄 Read: references/markdown-features.md

• 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

📄 Read: references/content-operations.md

• 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

📄 Read: references/import-export.md

• Import Word/HTML documents into the editor
• Export editor content to Word / PDF
• Markdown import/export

Style & Appearance

📄 Read: references/style-appearance.md

• 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

📄 Read: references/validation-security.md

• HTML form integration with RTE
• XHTML validation and XSS prevention
• Read-only mode

How-To Scenarios

📄 Read: references/how-to.md

• 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

📄 Read: references/properties.md

• 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

📄 Read: references/methods.md

• Complete list of all public instance methods with signatures and return types
• Parameter details and usage examples
• executeCommand with full CommandName enum and argument interfaces
• Static Inject method and available module list

Events Reference

📄 Read: references/events.md

• 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)

/* styles.css */
@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');

<!-- index.html -->
<div id="editor"></div>

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; // HTML string or Markdown string
  console.log(content);
});

Auto-save content

const editor = new RichTextEditor({
  saveInterval: 5000, // save every 5 seconds of inactivity
  change: (args) => {
    localStorage.setItem('draft', args.value);
  }
});

Read-only mode

editor.readonly = true;

Programmatically set content

editor.value = '<p>New content</p>';
editor.dataBind(); // apply the change

Module Injection Reference

Inject only what you need — each module adds to bundle size. Always call RichTextEditor.Inject(...) before new RichTextEditor(...).