wysiwyg-markdown-editor-online/README_CN.md

A modern, powerful online WYSIWYG Markdown editor & converter. Easily edit .md files like Word and export/convert Markdown to JPG/PNG images, high-quality PDF documents, HTML webpages, and rich text.

# 🪶 Muya MD Editor - 在线所见即所得 Markdown 编辑器

中文 | [English](README.md)

## [所见即所得 Markdown 在线编辑器](https://it365.janqi.com/markdown/editor/muya/zh/)

`Muya MD Editor` 是一款基于开源 Muya 渲染引擎打造的现代化在线所见即所得 (WYSIWYG) Markdown 编辑器与文档管理工具，让您可以像使用 Word 编辑器那样直观、顺畅地编辑 `.md` 文件。它结合了极简顺畅的写作体验、强大的渲染能力（数学公式、流程图、代码高亮）以及多格式一键导出功能。

---

## ✨ 核心功能亮点 (Key Features)

### 1. ⚡ 实时所见即所得 (WYSIWYG) 写作
- **即时渲染**：输入 Markdown 语法即可实时预览排版效果，同时保持完全可编辑状态。
- **浮动工具栏**：选中任意文本即可弹出内联格式化工具栏，支持加粗、斜体、删除线、链接、行内代码、上下标及脚注。
- **快捷指令**：输入 `/` 可快速召唤块级元素菜单，输入 `:` 可触发 Emoji 自动补全。

### 2. 📊 强大的图表与数学公式支持
- **📐 KaTeX 数学公式**：原生集成高能 KaTeX 渲染引擎，支持行内公式（如 `$\nabla \times \mathbf{E} = -\frac{\partial \mathbf{B}}{\partial t}$`）及复杂块级矩阵方程。
- **📈 Mermaid 流程图与图表**：内置 Mermaid 引擎，支持直接在代码块中绘制流程图 (Flowchart)、序列图 (Sequence Diagram)、甘特图 (Gantt) 等。
- **🎨 更多渲染扩展**：支持 PlantUML、Vega/Vega-Lite 数据可视化图表及 Prism 语法高亮。

### 3. 📤 丰富多元的导出与分享
| 导出格式 | 格式说明 | 适用场景 |
| :--- | :--- | :--- |
| **Markdown (.md)** | 导出标准 `.md` 源码文件 | 本地备份与跨编辑器迁移 |
| **PNG / JPG 图片** | 生成高清透明/压缩长图 | 社交媒体分享、演示文稿 |
| **HTML 网页 (.html)** | 包含完整样式与组件的独立 HTML 文件 | 离线阅读、富文本复制粘贴至 Word/WPS |
| **PDF 文档 (.pdf)** | 保持公式与图表完整格式的高保真 PDF | 跨平台发布、打印与电子书制作 |
| **ZIP 批量导出** | 将文档库中的所有文档一键打包导出 | 批量备份与迁移 |

### 4. 📁 便携式本地文档管理
- **本地自动保存**：结合节流 (Throttle) 与防抖 (Debounce) 算法，自动将编辑内容安全持久化至浏览器的 IndexedDB 数据库中。
- **拖拽导入**：支持直接将本地的 `.md` / `.markdown` 文件拖拽至侧边栏进行快速导入。
- **全文搜索与排序**：提供快速检索框与简单清晰的文档列表，支持重命名、复制 Markdown 源码或富文本内容。

---

## 🛠️ 详细 Markdown 语法支持

- **规范标准**：严格遵循 **CommonMark 0.31** 和 **GitHub Flavored Markdown (GFM) 0.29** 规范。
- **块级元素**：多级标题（`#` ~ `####`）、无序/有序/任务列表（`[x]`）、引用块（`>`）、分割线（`---`）、表格与代码块。
- **高级语法**：
  - **Front Matter**：支持 YAML Front Matter 解析与编辑。
  - **脚注 (Footnotes)**：支持 `[^id]` 引用与底部定义，具备交互式悬浮预览及返回跳转功能。
  - **代码块行号**：提供代码块行号显示开关（可在编辑器设置中开启）。

---

## 🚀 快速上手指南 (Quick Start)

1. **新建文档**：点击侧边栏顶部的 `+` 按钮创建新文档。
2. **导入已有文件**：点击侧边栏的 `Import File` 按钮，或直接将电脑中的 `.md` 文件拖入页面侧边栏。
3. **编辑与格式化**：在主编辑区直接输入 Markdown 语法，或拖拽文本使用浮动工具栏设置样式。
4. **导出文件**：点击顶部导航栏的 **Export** 按钮，选择目标格式（MD、PNG、JPG、HTML 或 PDF）下载至本地。

---

## 🔗 相关资源与链接

- [所见即所得Markdown编辑器 (中文)](https://it365.janqi.com/markdown/editor/muya/zh/)
- [WYSIWYG Markdown Editor Online (English)](https://it365.janqi.com/markdown/editor/muya/en/)
- [WYSIWYG Markdown-Editor Online (Deutsch)](https://it365.janqi.com/markdown/editor/muya/de/)
- [WYSIWYG Markdown エディタ (日本語)](https://it365.janqi.com/markdown/editor/muya/ja/)
- [Editor Markdown WYSIWYG en línea (Español)](https://it365.janqi.com/markdown/editor/muya/es/)
- [Editor Markdown WYSIWYG Online (Português)](https://it365.janqi.com/markdown/editor/muya/pt/)
- [UNPKG](https://unpkg.com/wysiwyg-markdown-editor-online/)
- [jsDelivr](https://www.jsdelivr.com/package/npm/wysiwyg-markdown-editor-online)
- [npmx](https://npmx.dev/package/wysiwyg-markdown-editor-online)
- **底层开源引擎**：Muya