Syncfusion Vue Rich Text Editor

Implementing the Syncfusion Vue Rich Text Editor

The Syncfusion Vue Rich Text Editor (ejs-richtexteditor) is a single, unified editor component that supports two primary modes:

• HTML mode (default) — WYSIWYG editor that returns valid HTML markup
• Markdown mode — plain-text editing with Markdown syntax, rendered via a third-party library like marked

Both modes share the same Vue component and @syncfusion/ej2-vue-richtexteditor package. The editorMode prop and the injected service module (HtmlEditor vs MarkdownEditor) are what differentiate them.

When to Use This Skill

• User wants to add a rich text / WYSIWYG editor to a Vue app
• User wants a Markdown editor with preview support
• User needs to customize the toolbar (types, items, sticky, floating)
• User wants to insert images, audio, video, tables, or links
• User needs paste-from-Word cleanup, inline editing, or IFrame mode
• User wants to integrate AI Assistant, slash menu, emoji picker, or @mentions
• User needs form validation, read-only mode, or XHTML validation
• User needs to get/set editor value or work with events and selection API

Mode Selection Guide

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Package installation (@syncfusion/ej2-vue-richtexteditor)
• CSS imports and theme setup
• Module injection reference table (all available services)
• Minimal HTML editor setup (Composition API + Options API)
• Minimal Markdown editor setup
• Running the application

Editor Modes (HTML vs Markdown)

📄 Read: references/editor-modes.md

• HTML mode — default WYSIWYG, returns HTML markup
• Markdown mode — editorMode="Markdown", returns Markdown text
• Supported Markdown tags and selection formatting
• Converting Markdown to HTML with marked library
• Live markdown preview implementation
• Side-by-side split-pane preview with Splitter component

Toolbar Configuration

📄 Read: references/toolbar-configuration.md

• Toolbar types: Expand, MultiRow, Scrollable, Popup
• Sticky/floating toolbar (enableFloating, floatingToolbarOffset)
• Toolbar position (top/bottom) and toolbarSettings
• Enabling/disabling toolbar items programmatically
• Custom toolbar button templates

Toolbar Tools Reference

📄 Read: references/toolbar-tools.md

• All built-in toolbar items by category (text formatting, font, alignment, lists, links, images, tables, undo/redo, misc)
• Markdown-specific toolbar items
• Removing or reordering built-in tools
• toolbarSettings.items array configuration

Quick Toolbars

📄 Read: references/quick-toolbars.md

• Context-aware toolbars for images, links, tables, audio, video
• Customizing quickToolbarSettings per element type
• Default quick toolbar items and overrides
• Enabling/disabling quick toolbars

Inserting Images

📄 Read: references/insert-images.md

• Image insertion via toolbar (URL and file upload)
• Server-side upload with insertImageSettings
• Drag-and-drop image support
• Image resize, alignment, caption, alt text
• Renaming images on server, checking image size limits
• Image module injection

Inserting Media (Audio & Video)

📄 Read: references/insert-media.md

• Audio insertion with Audio module
• Video insertion with Video module
• File browser integration
• Media quick toolbar options

Inserting Tables

📄 Read: references/insert-table.md

• Table insertion in HTML mode and Markdown mode
• Default table structure (2×2 with header row)
• Table quick toolbar (rows, columns, merge, properties)
• Table Table module injection

Editor Value & Content

📄 Read: references/editor-value.md

• Setting initial value via :value prop
• Getting editor value via getValue() method
• Two-way binding with v-model
• Placeholder text (placeholder prop)
• Character count and maxLength
• change, input, blur events
• execCommand API for programmatic formatting
• Selection API and cursor positioning

Smart Editing Features

📄 Read: references/smart-editing.md

• Slash menu (/ command palette) with slashMenuSettings
• Emoji picker toolbar integration
• Mention support (@mention) with MentionModule
• Mail merge fields

Paste Cleanup

📄 Read: references/paste-cleanup.md

• Pasting content from Word/browser with formatting control
• pasteCleanupSettings: prompt, plainText, keepFormat
• Stripping denied tags/attributes (deniedTags, deniedAttrs)
• PasteCleanup module injection
• Clipboard event handling

Editor Types (Inline, IFrame, Resizable)

📄 Read: references/editor-types.md

• Inline editing mode (content-editable in-place editing)
• IFrame mode (style isolation from page)
• Resizable editor (enableResize, resize handles)
• When to choose each render type

AI Assistant

📄 Read: references/ai-assistant.md

• AIAssistantService provider injection
• AICommands and AIQuery toolbar items
• AI pop-up with predefined prompt dropdown
• Customizing AI assistant behavior and properties

Validation & Security

📄 Read: references/validation-security.md

• Form integration and submit-on-form
• XHTML validation mode
• Read-only mode (readonly prop)
• Max length validation
• Spell and grammar check integration

Accessibility & Globalization

📄 Read: references/accessibility-globalization.md

• WCAG 2.2 and Section 508 compliance
• Keyboard navigation and shortcuts
• RTL (right-to-left) support
• Globalization and locale configuration
• Custom keyboard shortcut overrides

API Reference - Events

📄 Read: references/vue-events.md

• Lifecycle events (created, destroyed)
• Editor action events (actionBegin, actionComplete, toolbarClick)
• Content change events (change, selectionChanged, focus, blur)
• Dialog events (beforeDialogOpen, dialogOpen, dialogClose)
• File upload events (image, audio, video uploads)
• Toolbar and popup events
• AI Assistant events
• Advanced events (paste, resize, export, import)

API Reference - Methods

📄 Read: references/vue-methods.md

• Content access methods (getHtml, getText, getXhtml, getContent, getCharCount)
• Selection and range methods (getSelection, getRange, selectAll, selectRange)
• Command execution (executeCommand with all available commands)
• Toolbar management (enable, disable, remove toolbar items)
• Dialog methods (showDialog, closeDialog)
• Focus and state methods (focusIn, focusOut, refreshUI, destroy)
• AI Assistant methods (show/hide popup, execute prompt, manage history)
• Utility methods (sanitizeHtml, print, fullscreen, source code, emoji picker)

API Reference - Properties (Core)

📄 Read: references/properties-core.md

• Core configuration (value, valueTemplate, placeholder, enabled, readonly, cssClass, htmlAttributes)
• Dimensions and layout (width, height, enableResize)
• Editor modes and behavior (editorMode, enterKey, shiftEnterKey, enableTabKey, enableAutoUrl, enableMarkdownAutoFormat)
• Toolbar configuration (toolbarSettings with enable, enableFloating, position, type, items, itemConfigs)
• Toolbar customization (floatingToolbarOffset, showTooltip)
• Quick toolbar settings (for images, links, tables, audio, video with actionOnScroll, enableAppendToBody)
• Font and text formatting (fontFamily, fontSize, fontColor, backgroundColor, format, lineHeight, formatPainterSettings)
• List formatting (bulletFormatList, numberFormatList)
• Media insertion settings (insertImageSettings, insertAudioSettings, insertVideoSettings, fileManagerSettings)
• Table settings (tableSettings with width, resize, styles)
• Paste and clipboard (pasteCleanupSettings with prompt, keepFormat, deniedAttrs/Tags, allowedStyleProps; enableClipboardCleanup)

API Reference - Properties (Advanced)

📄 Read: references/properties-advanced.md

• AI Assistant settings (aiAssistantSettings with commands, prompts, suggestions, popup dimensions, toolbar settings, bannerTemplate)
• Advanced features (slashMenuSettings, emojiPickerSettings, codeBlockSettings, formatter, keyConfig for custom shortcuts)
• Validation and limits (maxLength, showCharCount, enableHtmlSanitizer, enableHtmlEncode, enableXhtml)
• Localization and accessibility (locale with L10n translations, enableRtl for right-to-left languages)
• IFrame mode (iframeSettings with enable, attributes, resources, metaTags, sandbox)
• Inline mode (inlineMode with enable, onSelection for toolbar display)
• Import and export (importWord, exportWord with serviceUrl/fileName/stylesheet, exportPdf with serviceUrl/fileName/stylesheet)
• Persistence and auto-save (enablePersistence with localStorage, autoSaveOnIdle, saveInterval in milliseconds)
• Undo/redo (undoRedoSteps for history limit, undoRedoTimer for debounce delay)

Quick Start

npm install @syncfusion/ej2-vue-richtexteditor

npm install @syncfusion/ej2-tailwind3-theme

HTML Editor (Composition API)

<template>
  <ejs-richtexteditor :value="value" :toolbarSettings="toolbarSettings" />
</template>

<script setup>
import { provide } from 'vue';
import {
  RichTextEditorComponent as EjsRichtexteditor,
  Toolbar, Link, Image, HtmlEditor, QuickToolbar
} from '@syncfusion/ej2-vue-richtexteditor';

const value = '<p>Start editing here...</p>';
const toolbarSettings = {
  items: ['Bold', 'Italic', 'Underline', '|', 'Formats', 'Alignments',
    'OrderedList', 'UnorderedList', '|', 'CreateLink', 'Image', '|', 'Undo', 'Redo']
};
provide('richtexteditor', [Toolbar, Link, Image, HtmlEditor, QuickToolbar]);
</script>

<style>
@import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/rich-text-editor/index.css';
</style>

Markdown Editor (Composition API)

<template>
  <ejs-richtexteditor
    editorMode="Markdown"
    :value="value"
    :toolbarSettings="toolbarSettings"
  />
</template>

<script setup>
import { provide } from 'vue';
import {
  RichTextEditorComponent as EjsRichtexteditor,
  Toolbar, Link, Image, MarkdownEditor
} from '@syncfusion/ej2-vue-richtexteditor';

const value = '**Hello** from Markdown editor!';
const toolbarSettings = {
  items: ['Bold', 'Italic', 'StrikeThrough', '|',
    'Formats', 'OrderedList', 'UnorderedList', '|',
    'CreateLink', 'Image', '|', 'Undo', 'Redo']
};
provide('richtexteditor', [Toolbar, Link, Image, MarkdownEditor]);
</script>

Key Module Injection Reference

Always inject modules in provide('richtexteditor', [...modules]).

Common Patterns

Controlled value with v-model

<ejs-richtexteditor v-model:value="content" />

Getting value programmatically

<ejs-richtexteditor ref="rteRef" />
<!-- In script: -->
const html = rteRef.value.ej2Instances.getHTML();
const text = rteRef.value.ej2Instances.getText();

Markdown editor + live HTML preview

Use editorMode="Markdown" with a change event handler that passes the content through marked.parse() into a preview <div>. See references/editor-modes.md for the full split-pane implementation.

Decide: HTML mode or Markdown mode?

• Need formatted output to store as HTML → use HTML mode
• Need lightweight text with syntax users can read/edit as plain text → use Markdown mode
• Need rich media (images, video, audio, tables with formatting) → use HTML mode
• Need developer-friendly source that renders in GitHub/Notion → use Markdown mode