syncfusion-aspnetcore-markdown-converter

Syncfusion ASP.NET Core Markdown 转换器

Syncfusion ASP.NET Core Markdown 转换器是一款轻量级客户端工具（通过 CDN 或 npm 加载），可将 Markdown 文本转换为简洁、语义化的 HTML。它支持所有常见的 Markdown 元素——标题、列表、表格、链接、图片和行内样式——并可与 Syncfusion Rich Text Editor 标记帮助程序（<ejs-richtexteditor>）无缝集成，为 ASP.NET Core MVC 或 Razor Pages 应用提供实时编辑和预览工作流。

---

导航指南

开始使用

📄 阅读： references/getting-started.md

• NuGet 安装和标记帮助程序注册
• CDN 样式表和脚本引用
• 在 Razor 视图中运行基本的 Markdown 到 HTML 转换
• 所需的 CSS 和主题设置

toHtml API

📄 阅读： references/tohtml-api.md

• toHtml 方法签名和参数（在 Razor 视图中使用 JavaScript）
• 支持的 Markdown 元素（标题、列表、表格、链接、图片、行内样式）
• 返回值和用法模式
• 简单的转换代码示例

可配置选项

📄 阅读： references/configurable-options.md

• MarkdownConverterOptions 对象
• async — 对大型内容进行异步转换
• gfm — 支持 GitHub Flavored Markdown
• lineBreak — 将单个换行符转换为 <br> 元素
• silence — 遇到无效 Markdown 时抑制错误
• 各选项的使用时机和原因

Rich Text Editor 集成

📄 阅读： references/richtexteditor-integration.md

• 将 <ejs-richtexteditor>（editorMode="Markdown"）与 MarkdownConverter 结合使用
• 使用 toHtml 在 keyup 时实时预览
• 完整的预览切换模式
• 并排 Splitter 布局
• Markdown 模式的工具栏配置

---

快速开始

注册标记帮助程序并添加 CDN 引用，然后运行最简转换：

{{! _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 before </body> }}
<ejs-scripts></ejs-scripts>

// Inline script in Razor view or a linked .js file
var markdownContent = '# Hello World\nThis is **Markdown** text.';
var htmlOutput = ej.markdownconverter.MarkdownConverter.toHtml(markdownContent);
console.log(htmlOutput);
// Output: <h1>Hello World</h1><p>This is <strong>Markdown</strong> text.</p>

---

常见模式

启用所有选项进行转换

var html = ej.markdownconverter.MarkdownConverter.toHtml(markdownContent, {
  async: true,      // Non-blocking for large content
  gfm: true,        // GitHub Flavored Markdown
  lineBreak: true,  // Treat single newlines as <br>
  silence: true     // Suppress parse errors
});

在用户输入时实时预览

document.getElementById('textarea').addEventListener('keyup', function () {
  document.getElementById('preview').innerHTML =
    ej.markdownconverter.MarkdownConverter.toHtml(this.value);
});

在 Markdown 模式下与 Syncfusion RTE 标记帮助程序集成

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

// HomeController.cs
public ActionResult Index()
{
    ViewBag.value = "# Hello\nType **Markdown** here.";
    ViewBag.tools = new[] {
        "Bold", "Italic", "StrikeThrough", "|",
        "Formats", "Blockquote", "OrderedList", "UnorderedList", "|",
        "CreateLink", "Image", "CreateTable", "|", "Undo", "Redo"
    };
    return View();
}

---

关键属性

选项	类型	默认值	用途
async	boolean	false	对大型负载进行异步转换
gfm	boolean	true	支持 GitHub Flavored Markdown
lineBreak	boolean	false	将单个换行符转换为 <br>
silence	boolean	false	跳过无效 Markdown，而不是抛出错误

---

常见用例

• 静态内容渲染 — 将用户在文本区或控制器操作中编写的 Markdown 转换为 HTML，以便在 Razor 视图中显示
• 编辑器实时预览 — 在 Markdown 模式下与 Syncfusion RTE 标记帮助程序配合，实现 HTML 实时预览
• 并排编辑 — 使用 Syncfusion Splitter 标记帮助程序同时显示编辑器和渲染后的 HTML
• CMS / 文档工具 — 渲染到 Razor 局部视图之前，处理存储在数据库或文件中的 Markdown