Implements the Syncfusion Vue Rich Text Editor (ejs-richtexteditor) supporting both HTML (WYSIWYG) and Markdown editing modes via the editorMode API from @syncfusion/ej2-vue-richtexteditor. Use this skill for toolbar customization, image upload, paste cleanup, inline editing, AI assistant integration, slash menu, emoji picker, and mention support in Vue applications.
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.
A direct command skips the review prompt. Inspect the source before running it.
The command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
File Explorer
20 files
Showing SKILL.md
SKILL.md
Source instructions · Read-only preview
name
syncfusion-vue-rich-text-editor
description
Implements the Syncfusion Vue Rich Text Editor (ejs-richtexteditor) supporting both HTML (WYSIWYG) and Markdown editing modes via the editorMode API from @syncfusion/ej2-vue-richtexteditor. Use this skill for toolbar customization, image upload, paste cleanup, inline editing, AI assistant integration, slash menu, emoji picker, and mention support in Vue applications.
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
<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
Feature
Module to Inject
HTML editing (default)
HtmlEditor
Markdown editing
MarkdownEditor
Toolbar
Toolbar
Hyperlinks
Link
Images
Image
Audio
Audio
Video
Video
Tables
Table
Quick toolbars
QuickToolbar
Paste cleanup
PasteCleanup
Slash menu
SlashMenu
AI Assistant
AIAssistantService
Character count
Count
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
