syncfusion-angular-markdown-converter

用途

Syncfusion Angular Markdown Converter 是一个轻量工具，用于将 Markdown 格式的文本转换为干净、语义化的 HTML。它通常与 Syncfusion 富文本编辑器（Rich Text Editor，Markdown 模式）配合使用，为渲染内容提供实时预览。

以下情形适合使用本工具：

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

主要能力

Markdown 转 HTML：通过静态方法 MarkdownConverter.toHtml(content, options?) 将 Markdown 字符串转换为 HTML，无需编辑器 UI 即可独立使用。示例：

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>

支持的元素：标题、列表、表格、链接、图片、行内样式。
可配置选项（MarkdownConverterOptions）：
- async（布尔，默认 false）：对大量内容进行异步转换
- gfm（布尔，默认 true）：GitHub Flavored Markdown 支持
- lineBreak（布尔，默认 false）：将单个换行转换为 <br>
- silence（布尔，默认 false）：在 Markdown 无效时抑制错误
示例：

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

使用方式

安装（三步）：

安装包：

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

在 src/styles.css 中导入 CSS：

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

转换 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：独立转换（无编辑器）

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

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

模式 2：按键实时预览（在富文本编辑器 textarea 内每次按键时转换）

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 模式的富文本编辑器，在每个变更事件中通过 updateValue() 更新预览窗格。完整实现参见 references/richtexteditor-integration.md。

富文本编辑器集成要点：

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

入门参考：

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

关键 API

API	类型	默认值	用途
MarkdownConverter.toHtml(content, options?)	static method	—	将 Markdown 字符串转换为 HTML
options.async	boolean	false	对大量内容进行异步转换
options.gfm	boolean	true	GitHub Flavored Markdown 支持
options.lineBreak	boolean	false	单个换行 → `<br>`
options.silence	boolean	false	在 Markdown 无效时抑制错误

适用场景

在 Angular 应用中实现 Markdown 到 HTML 的转换
为 Markdown 输入提供实时 HTML 预览
构建左右并排的 Markdown 编辑与预览界面
与 Syncfusion 富文本编辑器的 Markdown 模式集成

限制

资料未提供关于浏览器兼容性、性能上限、价格或授权方式的具体说明，暂未提供。

技能介绍

用途

主要能力

使用方式

关键 API

适用场景

限制