syncfusion-react-markdown-converter

实现 Syncfusion React Markdown 转换器

Syncfusion Markdown 转换器是一款轻量级工具，可将 Markdown 格式的文本转换为简洁、语义化的 HTML。它通常与 Syncfusion React 富文本编辑器（RichTextEditorComponent）搭配使用，并在 Markdown 编辑模式下提供渲染内容的实时预览。

何时使用此技能

• 在 React 应用中将 Markdown 文本转换为 HTML
• 在用户输入时实时预览 Markdown 内容
• 配置转换行为（GFM 支持、换行、异步模式、错误抑制）
• 使用 Markdown 模式下的 RichTextEditorComponent 构建带 HTML 预览的 Markdown 编辑器
• 将 MarkdownConverter.toHtml() 与 Syncfusion React 富文本编辑器集成

文档和导航指南

入门

• React 设置和项目创建（Vite / CRA）
• 安装 @syncfusion/ej2-markdown-converter 和 @syncfusion/ej2-react-richtexteditor
• material3 主题的 CSS 导入
• 模块注入（MarkdownEditor、Toolbar、Image、Link、Table）
• 运行应用

将 Markdown 转换为 HTML — toHtml API

• MarkdownConverter.toHtml() 方法签名
• 基本用法示例（独立使用，无需编辑器）
• 支持的 Markdown 元素（标题、列表、表格、链接、图片、内联样式）
• 使用 dangerouslySetInnerHTML 处理返回值

可配置选项

• MarkdownConverterOptions 接口
• async — 对较大内容进行异步转换
• gfm — 支持 GitHub Flavored Markdown（默认值：true）
• lineBreak — 将单个换行符转换为 <br>（默认值：false）
• silence — 忽略无效 Markdown 的错误（默认值：false）
• 向 toHtml() 传递选项的完整示例

富文本编辑器集成

• 使用 editorMode="Markdown" 启用 Markdown 模式
• 使用 created、change 和 actionComplete 事件实现实时预览
• Markdown 编辑的工具栏配置
• 用于自定义 Markdown 语法的 MarkdownFormatter
• 自定义预览切换按钮（完整预览模式）
• 带预览切换功能的完整可运行示例

快速入门

安装软件包，并通过以下三个步骤连接转换器：

1. 安装软件包：

npm install @syncfusion/ej2-markdown-converter
npm install @syncfusion/ej2-react-richtexteditor

2. 在 src/styles.css 中导入 CSS：

@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-richtexteditor/styles/material3.css';

3. 将 Markdown 转换为 HTML：

import { MarkdownConverter } from '@syncfusion/ej2-markdown-converter';

const markdown = '# Hello World\nThis is **Markdown** text.';
const html = MarkdownConverter.toHtml(markdown);
console.log(html);
// Output: <h1>Hello World</h1><p>This is <strong>Markdown</strong> text.</p>

常见模式

模式 1：独立转换（无需编辑器）

如果只需将 Markdown 字符串转换为 HTML，无需编辑器界面：

import { MarkdownConverter } from '@syncfusion/ej2-markdown-converter';

const html = MarkdownConverter.toHtml(markdownString);
document.getElementById('preview')!.innerHTML = html as string;

模式 2：在按键抬起时实时预览

在富文本编辑器的文本区域中，每次按键后都进行转换：

const markdownConversion = () => {
  if (mdsource?.classList.contains('e-active')) {
    const htmlPreview = rteObj.element.querySelector('#' + rteObj.getID() + 'html-view') as HTMLElement;
    htmlPreview.innerHTML = MarkdownConverter.toHtml(
      (rteObj.contentModule.getEditPanel() as HTMLTextAreaElement).value
    ) as string;
  }
};

模式 3：使用选项进行转换

禁用 GFM 并启用换行转换：

const html = MarkdownConverter.toHtml(markdownString, {
  gfm: false,
  lineBreak: true
});

模式 4：使用分隔器并排预览

如需完整的编辑器和预览体验，请将 Syncfusion Splitter 组件与 Markdown 模式下的富文本编辑器搭配使用。每次触发更改事件时，都会通过 updateValue() 更新预览窗格。 📄 阅读： references/richtexteditor-integration.md，了解完整实现。

主要属性 / API

API	类型	默认值	用途
MarkdownConverter.toHtml(content, options?)	静态方法	—	将 Markdown 字符串转换为 HTML
options.async	boolean	false	对较大内容进行异步转换
options.gfm	boolean	true	支持 GitHub Flavored Markdown
options.lineBreak	boolean	false	单个换行符 → <br>
options.silence	boolean	false	忽略无效 Markdown 的错误