syncfusion-aspnetcore-rich-text-editor

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing the Syncfusion ASP.NET Core Rich Text Editor

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

The Syncfusion ASP.NET Core Rich Text Editor (

<ejs-richtexteditor>

) is a single component that supports two editing modes:

HTML mode (default) — WYSIWYG editor producing valid HTML markup
Markdown mode (
```
editorMode="Markdown"
```
) — plain-text markdown editor with optional HTML preview

Both modes share the same tag helper, toolbar system, events, and most features. Choose the mode based on what your output format needs to be.

Syncfusion ASP.NET Core富文本编辑器（

<ejs-richtexteditor>

）是一款支持两种编辑模式的组件：

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

两种模式共享相同的标签助手、工具栏系统、事件以及大部分功能。可根据输出格式需求选择对应模式。

Editor Mode Decision

编辑模式选择

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)

用户需要编辑格式化内容 → 输出为HTML？
  └─ 使用默认HTML模式（无需设置editorMode）

用户需要编写/编辑Markdown文本？
  └─ 设置editorMode="Markdown"
     └─ 添加Marked.js实现实时预览（参考references/markdown-features.md）

When to Use This Skill

适用场景

Adding a rich text / WYSIWYG editor to an ASP.NET Core Razor page or MVC view
Implementing a Markdown editor in ASP.NET Core
Configuring toolbars, toolbar types, or custom toolbar tools
Handling image, video, or audio uploads within the editor
Inserting and managing tables
Enabling inline editing, iframe mode, or resizable editor
Integrating AI assistant, mentions, emoji picker, slash menu, or mail merge
Getting, setting, or saving editor values; auto-save; character count
Form validation with rich text content
Read-only or disabled editor states
XSS prevention and security
Accessibility, keyboard support, globalization, RTL
Handling editor events (lifecycle, focus, toolbar, upload, dialog, AI)
Looking up available properties, types, and defaults
Calling editor methods programmatically from JavaScript

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

Navigation Guide

导航指南

Getting Started

快速入门

📄 Read: references/getting-started.md

NuGet installation and tag helper registration
CDN stylesheet and script references
Basic HTML editor (default mode)
Basic Markdown editor (
```
editorMode="Markdown"
```
)
Initial value binding via
```
ViewBag
```
Toolbar configuration basics

📄 阅读： references/getting-started.md

NuGet安装与标签助手注册
CDN样式表与脚本引用
基础HTML编辑器（默认模式）
基础Markdown编辑器（
```
editorMode="Markdown"
```
）
通过
```
ViewBag
```
绑定初始值
工具栏基础配置

Editor Modes & Display Options

编辑模式与显示选项

📄 Read: references/editor-modes.md

HTML mode vs Markdown mode (
```
editorMode
```
property)
IFrame mode for isolated editing (
```
iframeSettings
```
)
Inline editing mode (
```
inlineMode
```
)
Resizable editor (
```
enableResize
```
)
Setting editor height and width

📄 阅读： references/editor-modes.md

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

Toolbar Configuration

工具栏配置

📄 Read: references/toolbar.md

Toolbar types: Expand, MultiRow, Scrollable, Popup
Sticky / floating toolbar (
```
enableFloating
```
,
```
floatingToolbarOffset
```
)
Toolbar position (top / bottom)
Quick toolbar for images, links, text, and tables
HTML mode toolbar items reference
Markdown mode toolbar items reference

📄 阅读： references/toolbar.md

工具栏类型：展开式、多行式、滚动式、弹出式
粘性/浮动工具栏（
```
enableFloating
```
、
```
floatingToolbarOffset
```
）
工具栏位置（顶部/底部）
图片、链接、文本和表格的快捷工具栏
HTML模式工具栏项参考
Markdown模式工具栏项参考

Text Formatting

文本格式化

📄 Read: references/text-formatting.md

Basic text styles: Bold, Italic, Underline, StrikeThrough, InlineCode
Font name, size, color, background color
Headings and paragraph formats
Text alignments and indent/outdent
Lists (ordered/unordered), blockquote, quotation formatting

📄 阅读： references/text-formatting.md

基础文本样式：粗体、斜体、下划线、删除线、行内代码
字体名称、大小、颜色、背景色
标题与段落格式
文本对齐与缩进/取消缩进
列表（有序/无序）、块引用、引用格式

Markdown Features

Markdown功能

📄 Read: references/markdown-features.md

Full supported markdown syntax reference
Custom markdown format configuration
Live Markdown-to-HTML preview with Marked.js
Table and image insertion in Markdown mode
Mention support in Markdown mode

📄 阅读： references/markdown-features.md

完整支持的Markdown语法参考
自定义Markdown格式配置
借助Marked.js实现Markdown到HTML的实时预览
Markdown模式下的表格与图片插入
Markdown模式下的提及支持

Media & Links

媒体与链接

📄 Read: references/media-and-links.md

Image insertion, upload to server, drag-and-drop
Image quick toolbar (caption, alt text, dimensions, alignment)
Video and audio insertion
Link insertion and quick toolbar
File browser integration

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

图片插入、服务器上传、拖拽上传
图片快捷工具栏（标题、替代文本、尺寸、对齐方式）
视频与音频插入
链接插入与快捷工具栏
文件浏览器集成

Tables

表格

📄 Read: references/table.md

Inserting tables and configuring the CreateTable tool
Table quick toolbar (rows, columns, merge, split, styles)
Cell properties, background color, alignment
Nesting tables
Table selection and copy/paste

📄 阅读： references/table.md

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

Smart Editing Features

智能编辑功能

📄 Read: references/smart-editing.md

Emoji picker
Slash menu
Mentions integration with the Mention component
Mail merge
Format painter
Code block formatting

📄 阅读： references/smart-editing.md

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

AI Assistant

AI助手

📄 Read: references/ai-assistant.md

Enabling AICommands and AIQuery toolbar items
Streaming and non-streaming AI response handling
```
AiAssistantPromptRequest
```
event
```
addAIPromptResponse
```
method

📄 阅读： references/ai-assistant.md

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

Editor Value & Content Management

编辑器值与内容管理

📄 Read: references/editor-value.md

Getting and setting HTML/Markdown values
```
getHtml()
```
,
```
getText()
```
,
```
getCharCount()
```
methods
Auto-save with
```
saveInterval
```
Placeholder text
Character count (
```
showCharCount
```
,
```
maxLength
```
)
HTML-encoded value (
```
enableHtmlEncode
```
)
Source code / code view editing
Paste and clipboard cleanup
Import and export (Word/PDF)
Undo/redo management

📄 阅读： references/editor-value.md

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

Validation & Security

验证与安全

📄 Read: references/validation-security.md

Form validation integration (
```
FormValidator
```
)
Read-only mode (
```
readonly
```
)
Disable editor (
```
enabled
```
)
XSS prevention (
```
enableHtmlSanitizer
```
,
```
beforeSanitizeHtml
```
)
XHTML validation
Style encapsulation

📄 阅读： references/validation-security.md

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

Customization

自定义

📄 Read: references/customization.md

Custom toolbar tools (template-based buttons)
Built-in toolbar items reference
CSS styling and theme customization
Enter key / Shift+Enter key behavior (
```
enterKey
```
,
```
shiftEnterKey
```
)
```
execCommand
```
API for programmatic formatting
Third-party integrations (CodeMirror)
```
enableToolbarItem
```
/
```
disableToolbarItem
```
methods

📄 阅读： references/customization.md

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

Accessibility & Globalization

可访问性与全球化

📄 Read: references/accessibility-globalization.md

WCAG 2.2 AA compliance
ARIA roles and attributes
Keyboard shortcuts (HTML and Markdown modes)
Localization and globalization (
```
locale
```
,
```
enableRtl
```
)

📄 阅读： references/accessibility-globalization.md

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

Events

事件

📄 Read: references/events.md

Lifecycle events:
```
Created
```
,
```
Destroyed
```
Focus/blur events:
```
Focus
```
,
```
Blur
```
,
```
Change
```
Toolbar/command events:
```
ActionBegin
```
,
```
ActionComplete
```

Paste/clipboard events:

BeforePasteCleanup

AfterPasteCleanup

BeforeClipboardWrite

Dialog events:

BeforeDialogOpen

DialogOpen

BeforeDialogClose

DialogClose

Popup events:

BeforePopupOpen

BeforePopupClose

BeforeQuickToolbarOpen

Image upload events:

ImageSelected

BeforeImageUpload

ImageUploading

ImageUploadSuccess

ImageUploadFailed

ImageRemoving

AfterImageDelete

BeforeImageDrop

Media upload events:

FileSelected

BeforeFileUpload

FileUploading

FileUploadSuccess

FileUploadFailed

FileRemoving

AfterMediaDelete

BeforeMediaDrop

Security events:
```
BeforeSanitizeHtml
```
Export events:
```
DocumentExporting
```

AI Assistant events:

AiAssistantPromptRequest

AiAssistantStopRespondingClick

AiAssistantToolbarClick

📄 阅读： 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

Properties

属性

📄 Read: references/properties.md

Complete property reference with types, defaults, and descriptions

Core properties:

Value

EditorMode

Placeholder

CssClass

Locale

State flags:

Enabled

Readonly

EnableResize

EnablePersistence

EnableRtl

EnableTabKey

Content & encoding:

EnableHtmlEncode

EnableHtmlSanitizer

EnableXhtml

EnableAutoUrl

EnableClipboardCleanup

Character count & auto-save:

ShowCharCount

MaxLength

SaveInterval

AutoSaveOnIdle

Key behavior:

EnterKey

ShiftEnterKey

FloatingToolbarOffset

Undo/redo:
```
UndoRedoSteps
```
,
```
UndoRedoTimer
```

Complex settings objects:

ToolbarSettings

QuickToolbarSettings

IframeSettings

InlineMode

InsertImageSettings

InsertVideoSettings

InsertAudioSettings

PasteCleanupSettings

TableSettings

FontFamily

FontColor

BackgroundColor

Format

SlashMenuSettings

EmojiPickerSettings

FormatPainterSettings

CodeBlockSettings

AiAssistantSettings

ImportWordSettings

ExportWordSettings

ExportPdfSettings

FileManagerSettings

📄 阅读： 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

Methods

方法

📄 Read: references/methods.md

Content methods:

getHtml()

getText()

getContent()

getSelectedHtml()

getXhtml()

getCharCount()

selectAll()

selectRange()

print()

Command execution:
```
executeCommand()
```
with full
```
CommandName
```
enum reference

Toolbar methods:

enableToolbarItem()

disableToolbarItem()

removeToolbarItem()

Focus methods:
```
focusIn()
```
,
```
focusOut()
```
Inline toolbar:
```
showInlineToolbar()
```
,
```
hideInlineToolbar()
```
Dialog methods:
```
showDialog()
```
,
```
closeDialog()
```
Undo/redo:
```
clearUndoRedo()
```
Source code:
```
showSourceCode()
```
Full screen:
```
showFullScreen()
```
Emoji picker:
```
showEmojiPicker()
```

AI Assistant:

addAIPromptResponse()

executeAIPrompt()

getAIPromptHistory()

clearAIPromptHistory()

showAIAssistantPopup()

hideAIAssistantPopup()

Lifecycle:
```
refresh()
```
,
```
refreshUI()
```
,
```
dataBind()
```
,
```
destroy()
```
Security:
```
sanitizeHtml()
```

📄 阅读： 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()
```

Quick Start

快速开始

HTML Editor (default)

HTML编辑器（默认）

razor

<!-- _ViewImports.cshtml -->
@addTagHelper *, Syncfusion.EJ2

<!-- _Layout.cshtml <head> -->
<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>

<!-- _Layout.cshtml <body> end -->
<ejs-scripts></ejs-scripts>

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

csharp

// 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();
}

razor

<!-- _ViewImports.cshtml -->
@addTagHelper *, Syncfusion.EJ2

<!-- _Layout.cshtml <head> -->
<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>

<!-- _Layout.cshtml <body> end -->
<ejs-scripts></ejs-scripts>

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

csharp

// 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 Editor

Markdown编辑器

razor

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

csharp

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();
}

razor

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

csharp

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();
}

Common Patterns

常见模式

Read editor value on form submit

表单提交时读取编辑器值

razor

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

razor

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

Image upload to server

图片上传至服务器

razor

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

razor

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

Inline editing

内嵌编辑

razor

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

razor

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

Character count with limit

带限制的字符计数

razor

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

razor

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