syncfusion-angular-markdown-converter

实现 Syncfusion Angular Markdown 转换器

Syncfusion Angular Markdown 转换器是一款轻量级工具，可将 Markdown 格式的文本转换为整洁、语义化的 HTML。它通常与 Syncfusion Rich Text Editor（Markdown 模式）搭配使用，以实时预览渲染后的内容。

何时使用此技能

• 在 Angular 应用中将 Markdown 文本转换为 HTML
• 在用户输入时实时显示 Markdown 内容的预览
• 配置转换行为（GFM 支持、换行符、异步模式、错误抑制）
• 构建并排显示的 Markdown 编辑器和 HTML 预览布局
• 将 MarkdownConverter.toHtml() 集成到 Syncfusion Rich Text Editor

文档与导航指南

入门

📄 阅读： references/getting-started.md

• Angular CLI 设置和项目创建
• 安装 @syncfusion/ej2-markdown-converter 和 @syncfusion/ej2-angular-richtexteditor
• Material3 主题的 CSS 导入
• 必需的模块注入（MarkdownEditor、Image、Link、Toolbar、Table）
• 运行应用

将 Markdown 转换为 HTML — toHtml API

📄 阅读： references/tohtml-api.md

• MarkdownConverter.toHtml() 方法签名
• 基本用法示例（独立使用，无需编辑器）
• 支持的 Markdown 元素（标题、列表、表格、链接、图像、行内样式）
• 在 Angular 模板中使用返回值

可配置选项

📄 阅读： references/configurable-options.md

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

Rich Text Editor 集成

📄 阅读： references/richtexteditor-integration.md

• 基于 Splitter 的并排编辑器和预览布局
• 在 Markdown editorMode 中配置 ejs-richtexteditor
• 使用 onChange 和 updateValue() 实时预览
• Markdown 编辑的工具栏配置
• 用于自定义 Markdown 语法的 MarkdownFormatter
• 自定义预览切换按钮（fullPreview 模式）
• 使用 Browser.isDevice 处理移动设备和设备方向

快速开始

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

1. 安装软件包：

npm install @syncfusion/ej2-markdown-converter
npm install @syncfusion/ej2-angular-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，而无需编辑器 UI 时：

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

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

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

在 Rich Text Editor 文本区域中每次击键时都进行转换：

public markDownConversion(): void {
  const textarea = this.editorObj.contentModule.getEditPanel() as HTMLTextAreaElement;
  const previewEl = document.getElementById('html-view') as HTMLElement;
  previewEl.innerHTML = MarkdownConverter.toHtml(textarea.value) as string;
}

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

禁用 GFM 并启用换行符转换：

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

模式 4：使用 Splitter 并排预览

要实现完整的编辑器和预览体验，请将 Syncfusion Splitter 组件与 Markdown 模式下的 Rich Text Editor 搭配使用。每次触发更改事件时，都会通过 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 的错误