syncfusion-javascript-markdown-converter

Syncfusion TypeScript Markdown 转换器

Syncfusion TypeScript Markdown 转换器（@syncfusion/ej2-markdown-converter）是一款轻量级工具，可将 Markdown 文本转换为简洁、语义化的 HTML。它支持所有常见的 Markdown 元素——标题、列表、表格、链接、图像和行内样式，并可与 Syncfusion Rich Text Editor 无缝集成，支持实时编辑和预览工作流。

---

导航指南

开始使用

📄 阅读： references/getting-started.md

• 安装 @syncfusion/ej2-markdown-converter 包
• 将 MarkdownConverter 导入 TypeScript 项目
• 执行基本的 Markdown 到 HTML 转换
• 必需的 CSS 和主题设置

toHtml API

📄 阅读： references/tohtml-api.md

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

可配置选项

📄 阅读： references/configurable-options.md

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

Rich Text Editor 集成

📄 阅读： references/richtexteditor-integration.md

• 将 @syncfusion/ej2-richtexteditor 与 @syncfusion/ej2-markdown-converter 结合使用
• 在 RTE 上设置 editorMode: 'Markdown'
• 使用 toHtml 在 keyup 时实时预览
• 完整的预览切换模式
• 并排的 Splitter 布局
• Markdown 模式下的工具栏配置

---

快速开始

安装包并执行最简转换：

npm install @syncfusion/ej2-markdown-converter

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

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

---

常见模式

启用所有选项进行转换

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

const html = 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
});

根据用户输入实时预览

textArea.addEventListener('keyup', () => {
  previewElement.innerHTML = MarkdownConverter.toHtml(textArea.value) as string;
});

在 Markdown 模式下与 Syncfusion RTE 集成

import { RichTextEditor, MarkdownEditor, Toolbar } from '@syncfusion/ej2-richtexteditor';
import { MarkdownConverter } from '@syncfusion/ej2-markdown-converter';
RichTextEditor.Inject(MarkdownEditor, Toolbar);

const rte = new RichTextEditor({
  editorMode: 'Markdown',
  height: '400px'
});
rte.appendTo('#editor');

---

关键属性

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

---

常见用例

• 静态内容渲染 — 将用户通过文本区域或 API 编写的 Markdown 转换为 HTML 并显示
• 编辑器实时预览 — 与 Markdown 模式下的 Syncfusion RTE 配合，实现 HTML 实时预览
• 并排编辑 — 使用 Syncfusion Splitter 同时显示编辑器和渲染后的 HTML
• CMS / 文档工具 — 在浏览器中渲染前，处理存储在数据库或文件中的 Markdown