syncfusion-vue-markdown-converter

实现 Syncfusion Vue Markdown 转换器

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

何时使用此技能

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

文档和导航指南

开始使用

📄 阅读： references/getting-started.md

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

将 Markdown 转换为 HTML — toHtml API

📄 阅读： references/tohtml-api.md

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

可配置选项

📄 阅读： references/configurable-options.md

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

富文本编辑器集成

📄 阅读： 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-vue-richtexteditor

2. 在 src/App.vue 或 src/main.js 中导入 CSS：

import '@syncfusion/ej2-base/styles/material3.css';
import '@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;

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

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

markDownConversion() {
  const textarea = this.rteObj.contentModule.getEditPanel();
  const previewEl = document.getElementById('html-view');
  previewEl.innerHTML = MarkdownConverter.toHtml(textarea.value);
}

模式 3：带选项的转换

禁用 GFM 并启用换行转换：

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

模式 4：使用 Splitter 并排预览

如需完整的编辑器和预览体验，可将 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 时抑制错误