syncfusion-javascript-markdown-converter

用途

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

主要能力

Markdown 转 HTML：通过 toHtml 方法将 Markdown 文本转换为 HTML。
支持常见 Markdown 元素：标题、列表、表格、链接、图片、行内样式。
可配置选项：通过 MarkdownConverterOptions 接口提供以下选项：
- async（boolean，默认 false）：对大内容进行异步转换，避免阻塞。
- gfm（boolean，默认 true）：支持 GitHub Flavored Markdown。
- lineBreak（boolean，默认 false）：将单个换行视为 <br> 元素。
- silence（boolean，默认 false）：遇到无效 Markdown 时跳过而非抛出错误。
富文本编辑器集成：可与 @syncfusion/ej2-richtexteditor 结合，在 RTE 上设置 editorMode: 'Markdown'，实现实时预览、完整预览切换、并排 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;
});

与 Syncfusion RTE 的 Markdown 模式集成：

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');

适用场景

静态内容渲染：将来自 textarea 或 API 的用户编写的 Markdown 转换为 HTML 进行展示。
实时编辑器预览：与 Syncfusion RTE 的 Markdown 模式配合，实现实时 HTML 预览。
并排编辑：使用 Syncfusion Splitter 同时显示编辑器和渲染后的 HTML。
CMS / 文档工具：在浏览器中渲染前，处理存储在数据库或文件中的 Markdown。

限制

资料中未提供关于浏览器兼容性、性能上限、授权与收费方式、包体积等具体限制信息，暂未提供。

技能介绍

用途

主要能力

使用方式

适用场景

限制