syncfusion-aspnetcore-rich-text-editor

实现 Syncfusion ASP.NET Core 富文本编辑器

Syncfusion ASP.NET Core 富文本编辑器（<ejs-richtexteditor>）是一个支持两种编辑模式的组件：

• HTML 模式（默认）——生成有效 HTML 标记的所见即所得编辑器
• Markdown 模式（editorMode="Markdown"）——纯文本 Markdown 编辑器，可选 HTML 预览

两种模式共用同一个标记帮助程序、工具栏系统、事件和大部分功能。请根据输出格式的需求选择模式。

编辑器模式选择

User wants to edit formatted content → output is HTML?
  └─ Use default HTML mode (no editorMode needed)

User wants to write/edit Markdown text?
  └─ Set editorMode="Markdown"
     └─ Add Marked.js for live preview (see references/markdown-features.md)

何时使用此技能

• 在 ASP.NET Core Razor 页面或 MVC 视图中添加富文本 / 所见即所得编辑器
• 在 ASP.NET Core 中实现 Markdown 编辑器
• 配置工具栏、工具栏类型或自定义工具栏工具
• 在编辑器中处理图像、视频或音频上传
• 插入和管理表格
• 启用内联编辑、iframe 模式或可调整大小的编辑器
• 集成 AI 助手、提及、表情符号选择器、斜杠菜单或邮件合并
• 获取、设置或保存编辑器值；自动保存；字符计数
• 对富文本内容进行表单验证
• 只读或禁用编辑器状态
• XSS 防护和安全性
• 无障碍访问、键盘支持、全球化、RTL
• 处理编辑器事件（生命周期、焦点、工具栏、上传、对话框、AI）
• 查询可用属性、类型和默认值
• 通过 JavaScript 以编程方式调用编辑器方法

导航指南

开始使用

📄 阅读： references/getting-started.md

• NuGet 安装和标记帮助程序注册
• CDN 样式表和脚本引用
• 基本 HTML 编辑器（默认模式）
• 基本 Markdown 编辑器（editorMode="Markdown"）
• 通过 ViewBag 绑定初始值
• 工具栏配置基础知识

编辑器模式与显示选项

📄 阅读： references/editor-modes.md

• HTML 模式与 Markdown 模式（editorMode 属性）
• 用于隔离编辑的 IFrame 模式（iframeSettings）
• 内联编辑模式（inlineMode）
• 可调整大小的编辑器（enableResize）
• 设置编辑器高度和宽度

工具栏配置

📄 阅读： references/toolbar.md

• 工具栏类型：Expand、MultiRow、Scrollable、Popup
• 粘性 / 浮动工具栏（enableFloating、floatingToolbarOffset）
• 工具栏位置（顶部 / 底部）
• 用于图像、链接、文本和表格的快速工具栏
• HTML 模式工具栏项参考
• Markdown 模式工具栏项参考

文本格式

📄 阅读： references/text-formatting.md

• 基本文本样式：Bold、Italic、Underline、StrikeThrough、InlineCode
• 字体名称、字号、颜色、背景色
• 标题和段落格式
• 文本对齐以及缩进 / 减少缩进
• 列表（有序 / 无序）、引用块、引文格式

Markdown 功能

📄 阅读： references/markdown-features.md

• 完整的 Markdown 语法支持参考
• 自定义 Markdown 格式配置
• 使用 Marked.js 实时预览 Markdown 到 HTML 的转换
• 在 Markdown 模式下插入表格和图像
• 在 Markdown 模式下支持提及

媒体与链接

📄 阅读： references/media-and-links.md

• 插入图像、上传到服务器、拖放
• 图像快速工具栏（说明文字、替代文本、尺寸、对齐）
• 插入视频和音频
• 插入链接和快速工具栏
• 文件浏览器集成

表格

📄 阅读： references/table.md

• 插入表格并配置 CreateTable 工具
• 表格快速工具栏（行、列、合并、拆分、样式）
• 单元格属性、背景色、对齐
• 嵌套表格
• 表格选择和复制 / 粘贴

智能编辑功能

📄 阅读： references/smart-editing.md

• 表情符号选择器
• 斜杠菜单
• 与 Mention 组件集成提及功能
• 邮件合并
• 格式刷
• 代码块格式设置

AI 助手

📄 阅读： references/ai-assistant.md

• 启用 AICommands 和 AIQuery 工具栏项
• 流式和非流式 AI 响应处理
• AiAssistantPromptRequest 事件
• addAIPromptResponse 方法

编辑器值与内容管理

📄 阅读： references/editor-value.md

• 获取和设置 HTML/Markdown 值
• getHtml()、getText()、getCharCount() 方法
• 使用 saveInterval 自动保存
• 占位文本
• 字符计数（showCharCount、maxLength）
• HTML 编码值（enableHtmlEncode）
• 源代码 / 代码视图编辑
• 粘贴和剪贴板清理
• 导入和导出（Word/PDF）
• 撤销/重做管理

验证与安全

📄 阅读： references/validation-security.md

• 表单验证集成（FormValidator）
• 只读模式（readonly）
• 禁用编辑器（enabled）
• XSS 防护（enableHtmlSanitizer、beforeSanitizeHtml）
• XHTML 验证
• 样式封装

自定义

📄 阅读： references/customization.md

• 自定义工具栏工具（基于模板的按钮）
• 内置工具栏项参考
• CSS 样式和主题自定义
• Enter 键 / Shift+Enter 键行为（enterKey、shiftEnterKey）
• 用于程序化格式设置的 execCommand API
• 第三方集成（CodeMirror）
• enableToolbarItem / disableToolbarItem 方法

无障碍与全球化

📄 阅读： references/accessibility-globalization.md

• 符合 WCAG 2.2 AA 标准
• ARIA 角色和属性
• 键盘快捷键（HTML 和 Markdown 模式）
• 本地化和全球化（locale、enableRtl）

事件

📄 阅读： references/events.md

• 生命周期事件：Created、Destroyed
• 聚焦/失焦事件：Focus、Blur、Change
• 工具栏/命令事件：ActionBegin、ActionComplete
• 粘贴/剪贴板事件：BeforePasteCleanup、AfterPasteCleanup、BeforeClipboardWrite
• 对话框事件：BeforeDialogOpen、DialogOpen、BeforeDialogClose、DialogClose
• 弹出窗口事件：BeforePopupOpen、BeforePopupClose、BeforeQuickToolbarOpen
• 图像上传事件：ImageSelected、BeforeImageUpload、ImageUploading、ImageUploadSuccess、ImageUploadFailed、ImageRemoving、AfterImageDelete、BeforeImageDrop
• 媒体上传事件：FileSelected、BeforeFileUpload、FileUploading、FileUploadSuccess、FileUploadFailed、FileRemoving、AfterMediaDelete、BeforeMediaDrop
• 安全事件：BeforeSanitizeHtml
• 导出事件：DocumentExporting
• AI 助手事件：AiAssistantPromptRequest、AiAssistantStopRespondingClick、AiAssistantToolbarClick

属性

📄 阅读： references/properties.md

• 完整的属性参考，包含类型、默认值和说明
• 核心属性：Value、EditorMode、Placeholder、CssClass、Locale
• 状态标志：Enabled、Readonly、EnableResize、EnablePersistence、EnableRtl、EnableTabKey
• 内容与编码：EnableHtmlEncode、EnableHtmlSanitizer、EnableXhtml、EnableAutoUrl、EnableClipboardCleanup
• 字符计数与自动保存：ShowCharCount、MaxLength、SaveInterval、AutoSaveOnIdle
• 按键行为：EnterKey、ShiftEnterKey、FloatingToolbarOffset
• 撤销/重做：UndoRedoSteps、UndoRedoTimer
• 复杂设置对象：ToolbarSettings、QuickToolbarSettings、IframeSettings、InlineMode、InsertImageSettings、InsertVideoSettings、InsertAudioSettings、PasteCleanupSettings、TableSettings、FontFamily、FontColor、BackgroundColor、Format、SlashMenuSettings、EmojiPickerSettings、FormatPainterSettings、CodeBlockSettings、AiAssistantSettings、ImportWordSettings、ExportWordSettings、ExportPdfSettings、FileManagerSettings

方法

📄 阅读： references/methods.md

• 内容方法：getHtml()、getText()、getContent()、getSelectedHtml()、getXhtml()、getCharCount()、selectAll()、selectRange()、print()
• 命令执行：executeCommand()，包含完整的 CommandName 枚举参考
• 工具栏方法：enableToolbarItem()、disableToolbarItem()、removeToolbarItem()
• 焦点方法：focusIn()、focusOut()
• 内联工具栏：showInlineToolbar()、hideInlineToolbar()
• 对话框方法：showDialog()、closeDialog()
• 撤销/重做：clearUndoRedo()
• 源代码：showSourceCode()
• 全屏：showFullScreen()
• 表情符号选择器：showEmojiPicker()
• AI 助手：addAIPromptResponse()、executeAIPrompt()、getAIPromptHistory()、clearAIPromptHistory()、showAIAssistantPopup()、hideAIAssistantPopup()
• 生命周期：refresh()、refreshUI()、dataBind()、destroy()
• 安全：sanitizeHtml()

---

快速入门

HTML 编辑器（默认）

@addTagHelper *, Syncfusion.EJ2


<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/fluent.css" />
<script src="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/dist/ej2.min.js"></script>


<ejs-scripts></ejs-scripts>


<ejs-richtexteditor id="editor" value="@ViewBag.value">
    <e-richtexteditor-toolbarsettings items="@ViewBag.tools"></e-richtexteditor-toolbarsettings>
</ejs-richtexteditor>

// HomeController.cs
public ActionResult Index()
{
    ViewBag.value = "<p>Start editing here...</p>";
    ViewBag.tools = new[] {
        "Bold", "Italic", "Underline", "|",
        "Formats", "Alignments", "OrderedList", "UnorderedList", "|",
        "CreateLink", "Image", "CreateTable", "|",
        "SourceCode", "|", "Undo", "Redo"
    };
    return View();
}

Markdown 编辑器

<ejs-richtexteditor id="markdown-editor" editorMode="Markdown" value="@ViewBag.value">
    <e-richtexteditor-toolbarsettings items="@ViewBag.tools"></e-richtexteditor-toolbarsettings>
</ejs-richtexteditor>

public ActionResult Index()
{
    ViewBag.value = "**Hello World** — start writing *markdown* here.";
    ViewBag.tools = new[] {
        "Bold", "Italic", "StrikeThrough", "InlineCode", "|",
        "Formats", "Blockquote", "OrderedList", "UnorderedList", "|",
        "CreateLink", "Image", "CreateTable", "|", "Undo", "Redo"
    };
    return View();
}

---

常见模式

在表单提交时读取编辑器的值

<form id="form-element">
    <ejs-richtexteditor id="rte" name="rteContent" value="@ViewBag.value"></ejs-richtexteditor>
    <button type="submit">Submit</button>
</form>
<script>
    document.querySelector('form').onsubmit = function () {
        var rte = document.getElementById('rte').ej2_instances[0];
        console.log(rte.getHtml());
    };
</script>

将图片上传到服务器

<ejs-richtexteditor id="editor">
    <e-richtexteditor-insertimagesettings
        saveUrl="/Home/SaveImage"
        removeUrl="/Home/RemoveImage"
        path="./Uploads/">
    </e-richtexteditor-insertimagesettings>
</ejs-richtexteditor>

内联编辑

<ejs-richtexteditor id="inline" value="@ViewBag.value">
    <e-richtexteditor-inlinemode enable="true" onSelection="true"></e-richtexteditor-inlinemode>
</ejs-richtexteditor>

设置字数限制并统计字符数

<ejs-richtexteditor id="editor" showCharCount="true" maxLength="500" value="@ViewBag.value">
</ejs-richtexteditor>