syncfusion-vue-rich-text-editor

实现 Syncfusion Vue Rich Text Editor

Syncfusion Vue Rich Text Editor（ejs-richtexteditor）是一个统一的编辑器组件，支持两种主要模式：

• HTML 模式（默认）——所见即所得编辑器，返回有效的 HTML 标记
• Markdown 模式——使用 Markdown 语法进行纯文本编辑，并通过 marked 等第三方库进行渲染

两种模式共用同一个 Vue 组件和 @syncfusion/ej2-vue-richtexteditor 包。用于区分这两种模式的是 editorMode 属性和注入的服务模块（HtmlEditor 或 MarkdownEditor）。

何时使用此技能

• 用户想在 Vue 应用中添加富文本 / 所见即所得编辑器
• 用户想要支持预览的 Markdown 编辑器
• 用户需要自定义工具栏（类型、项目、固定、浮动）
• 用户想要插入图片、音频、视频、表格或链接
• 用户需要清理从 Word 粘贴的内容、内联编辑或 IFrame 模式
• 用户想集成 AI 助手、斜杠菜单、表情选择器或 @提及
• 用户需要表单验证、只读模式或 XHTML 验证
• 用户需要获取 / 设置编辑器值，或使用事件和选择 API

模式选择指南

目标	模式	注入
输出所见即所得 HTML	editorMode="HTML"（默认）	HtmlEditor
使用 #、**bold** 语法的 Markdown 文本	editorMode="Markdown"	MarkdownEditor
在 IFrame 中隔离编辑	HTML 模式 + IFrame 配置	HtmlEditor、HtmlEditor 渲染模式
实时 Markdown 预览分栏	Markdown 模式 + marked 库	MarkdownEditor

文档和导航指南

开始使用

📄 阅读： references/getting-started.md

• 安装包（@syncfusion/ej2-vue-richtexteditor）
• CSS 导入和主题设置
• 模块注入参考表（所有可用服务）
• 最简 HTML 编辑器设置（Composition API + Options API）
• 最简 Markdown 编辑器设置
• 运行应用

编辑器模式（HTML 与 Markdown）

📄 阅读： references/editor-modes.md

• HTML 模式——默认的所见即所得模式，返回 HTML 标记
• Markdown 模式——editorMode="Markdown"，返回 Markdown 文本
• 支持的 Markdown 标签和选区格式
• 使用 marked 库将 Markdown 转换为 HTML
• 实时 Markdown 预览实现
• 使用 Splitter 组件进行并排分栏预览

工具栏配置

📄 阅读： references/toolbar-configuration.md

• 工具栏类型：Expand、MultiRow、Scrollable、Popup
• 固定 / 浮动工具栏（enableFloating、floatingToolbarOffset）
• 工具栏位置（顶部 / 底部）和 toolbarSettings
• 以编程方式启用 / 禁用工具栏项目
• 自定义工具栏按钮模板

工具栏工具参考

📄 阅读： references/toolbar-tools.md

• 按类别列出的所有内置工具栏项目（文本格式、字体、对齐、列表、链接、图片、表格、撤销 / 重做及其他）
• Markdown 专用工具栏项目
• 移除或重新排列内置工具
• toolbarSettings.items 数组配置

快捷工具栏

📄 阅读： references/quick-toolbars.md

• 用于图片、链接、表格、音频和视频的上下文感知工具栏
• 按元素类型自定义 quickToolbarSettings
• 默认快捷工具栏项目和覆盖设置
• 启用 / 禁用快捷工具栏

插入图片

📄 阅读： references/insert-images.md

• 通过工具栏插入图片（URL 和文件上传）
• 使用 insertImageSettings 在服务器端上传
• 支持拖放图片
• 图片调整大小、对齐、标题和替代文本
• 在服务器上重命名图片、检查图片大小限制
• 注入 Image 模块

插入媒体（音频和视频）

📄 阅读： references/insert-media.md

• 使用 Audio 模块插入音频
• 使用 Video 模块插入视频
• 文件浏览器集成
• 媒体快捷工具栏选项

插入表格

📄 阅读： references/insert-table.md

• 在 HTML 模式和 Markdown 模式下插入表格
• 默认表格结构（2×2，含标题行）
• 表格快捷工具栏（行、列、合并、属性）
• 注入表格 Table 模块

编辑器值和内容

📄 阅读： references/editor-value.md

• 通过 :value 属性设置初始值
• 通过 getValue() 方法获取编辑器值
• 使用 v-model 进行双向绑定
• 占位文本（placeholder 属性）
• 字符数和 maxLength
• change、input、blur 事件
• 用于程序化格式设置的 execCommand API
• 选择 API 和光标定位

智能编辑功能

📄 阅读： references/smart-editing.md

• 使用 slashMenuSettings 的斜杠菜单（/ 命令面板）
• 表情符号选择器工具栏集成
• 使用 MentionModule 支持提及（@mention）
• 邮件合并字段

粘贴清理

📄 阅读： references/paste-cleanup.md

• 从 Word/浏览器粘贴内容并控制格式
• pasteCleanupSettings：prompt、plainText、keepFormat
• 移除禁止的标签/属性（deniedTags、deniedAttrs）
• 注入 PasteCleanup 模块
• 剪贴板事件处理

编辑器类型（内联、IFrame、可调整大小）

📄 阅读： references/editor-types.md

• 内联编辑模式（原位内容可编辑）
• IFrame 模式（与页面样式隔离）
• 可调整大小的编辑器（enableResize、调整大小手柄）
• 如何选择各渲染类型

AI 助手

📄 阅读： references/ai-assistant.md

• 注入 AIAssistantService 提供程序
• AICommands 和 AIQuery 工具栏项
• 带有预定义提示词下拉菜单的 AI 弹出窗口
• 自定义 AI 助手行为和属性

验证和安全

📄 阅读： references/validation-security.md

• 表单集成和表单提交
• XHTML 验证模式
• 只读模式（readonly 属性）
• 最大长度验证
• 拼写和语法检查集成

无障碍访问和全球化

📄 阅读： references/accessibility-globalization.md

• 符合 WCAG 2.2 和 Section 508 标准
• 键盘导航和快捷键
• RTL（从右到左）支持
• 全球化和区域设置配置
• 自定义键盘快捷键覆盖

API 参考 - 事件

📄 阅读： references/vue-events.md

• 生命周期事件（created、destroyed）
• 编辑器操作事件（actionBegin、actionComplete、toolbarClick）
• 内容更改事件（change、selectionChanged、focus、blur）
• 对话框事件（beforeDialogOpen、dialogOpen、dialogClose）
• 文件上传事件（图像、音频、视频上传）
• 工具栏和弹出窗口事件
• AI 助手事件
• 高级事件（paste、resize、export、import）

API 参考 - 方法

📄 阅读： references/vue-methods.md

• 内容访问方法（getHtml、getText、getXhtml、getContent、getCharCount）
• 选择和范围方法（getSelection、getRange、selectAll、selectRange）
• 命令执行（executeCommand，包含所有可用命令）
• 工具栏管理（启用、禁用、移除工具栏项）
• 对话框方法（showDialog、closeDialog）
• 焦点和状态方法（focusIn、focusOut、refreshUI、destroy）
• AI 助手方法（显示/隐藏弹出窗口、执行提示词、管理历史记录）
• 实用方法（sanitizeHtml、print、fullscreen、源代码、表情符号选择器）

API 参考 - 属性（核心）

📄 阅读： references/properties-core.md

• 核心配置（value、valueTemplate、placeholder、enabled、readonly、cssClass、htmlAttributes）
• 尺寸与布局（width、height、enableResize）
• 编辑器模式与行为（editorMode、enterKey、shiftEnterKey、enableTabKey、enableAutoUrl、enableMarkdownAutoFormat）
• 工具栏配置（toolbarSettings，包含 enable、enableFloating、position、type、items、itemConfigs）
• 工具栏自定义（floatingToolbarOffset、showTooltip）
• 快速工具栏设置（适用于图像、链接、表格、音频、视频，包含 actionOnScroll、enableAppendToBody）
• 字体与文本格式（fontFamily、fontSize、fontColor、backgroundColor、format、lineHeight、formatPainterSettings）
• 列表格式（bulletFormatList、numberFormatList）
• 媒体插入设置（insertImageSettings、insertAudioSettings、insertVideoSettings、fileManagerSettings）
• 表格设置（tableSettings，包含 width、resize、styles）
• 粘贴与剪贴板（pasteCleanupSettings，包含 prompt、keepFormat、deniedAttrs/Tags、allowedStyleProps；enableClipboardCleanup）

API 参考 - 属性（高级）

📄 阅读： references/properties-advanced.md

• AI 助手设置（aiAssistantSettings，包含 commands、prompts、suggestions、弹出窗口尺寸、工具栏设置、bannerTemplate）
• 高级功能（slashMenuSettings、emojiPickerSettings、codeBlockSettings、formatter、自定义快捷键 keyConfig）
• 验证与限制（maxLength、showCharCount、enableHtmlSanitizer、enableHtmlEncode、enableXhtml）
• 本地化与无障碍（包含 L10n 翻译的 locale、用于从右向左书写语言的 enableRtl）
• IFrame 模式（iframeSettings，包含 enable、attributes、resources、metaTags、sandbox）
• 内联模式（inlineMode，包含 enable、用于显示工具栏的 onSelection）
• 导入与导出（importWord、带有 serviceUrl/fileName/stylesheet 的 exportWord、带有 serviceUrl/fileName/stylesheet 的 exportPdf）
• 持久化与自动保存（enablePersistence，使用 localStorage；autoSaveOnIdle；以毫秒为单位的 saveInterval）
• 撤销/重做（用于限制历史记录数量的 undoRedoSteps、用于防抖延迟的 undoRedoTimer）

快速入门

npm install @syncfusion/ej2-vue-richtexteditor

npm install @syncfusion/ej2-tailwind3-theme

HTML 编辑器（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 编辑器（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>

关键模块注入参考

功能	要注入的模块
HTML 编辑（默认）	HtmlEditor
Markdown 编辑	MarkdownEditor
工具栏	Toolbar
超链接	Link
图像	Image
音频	Audio
视频	Video
表格	Table
快速工具栏	QuickToolbar
粘贴清理	PasteCleanup
斜杠菜单	SlashMenu
AI 助手	AIAssistantService
字符计数	Count

务必在 provide('richtexteditor', [...modules]) 中注入模块。

常见模式

使用 v-model 控制值

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

以编程方式获取值

<ejs-richtexteditor ref="rteRef" />

const html = rteRef.value.ej2Instances.getHTML();
const text = rteRef.value.ej2Instances.getText();

Markdown 编辑器 + 实时 HTML 预览

使用 editorMode="Markdown"，并通过 change 事件处理函数将内容传入 marked.parse()，再放入预览 <div>。完整的分栏窗格实现请参阅 references/editor-modes.md。

如何选择：HTML 模式还是 Markdown 模式？

• 需要以 HTML 格式存储的格式化输出 → 使用 HTML 模式
• 需要用户能够阅读或编辑为纯文本的轻量级文本与语法 → 使用 Markdown 模式
• 需要富媒体（图像、视频、音频、带格式的表格） → 使用 HTML 模式
• 需要对开发者友好的源内容，可在 GitHub/Notion 中渲染 → 使用 Markdown 模式