youyacao-md-editor API 接口与使用说明

一、引入方式

本项目发布 MVP：仅需引入 dist 目录中的 CSS 与 UMD JS，即可创建编辑器实例。

<link rel="stylesheet" href="dist/youyacao-md-editor.css" />
<script src="dist/youyacao-md-editor.umd.js"></script>

二、创建与调用

`new YouyacaoMDEditor(options) 构造器 `

`options.el`：挂载容器（必填），类型为 DOM 元素
`options.value`：初始 Markdown 内容（string）
`options.onChange`：编辑内容变化回调（参数为当前 md）
`options.showToolbar`：是否显示内置工具栏（默认 `true`）
`options.scrollSync`：是否开启滚动同步（默认 `true`）
`options.sanitizePreview`：预览安全渲染（默认 `true`）
`options.linkTargetBlank`：链接是否默认 `target=_blank`（默认 `true`）
`options.uploadImages`：图片上传回调（可选）。传入 `File[]`，返回 `Promise<string[]>`（即每张图片的 URL）。默认：使用 `FileReader` 生成 `data:image/...` 并直接插入。
`options.imageFileAccept`：文件选择器的 `accept`（默认 `image/*`）

const editor = new YouyacaoMDEditor({
  el: document.getElementById("app"),
  value: "# 标题\\n\\n试试：**加粗**、*斜体*、`代码`",
  onChange: (md) => console.log(md)
});

三、API 列表（当前 MVP）

`getValue()`

返回当前编辑区的 Markdown 内容

`setValue(value, opts?)`

设置编辑区内容，并同步更新预览
`opts.silent`：为 `true` 时不触发 `onChange`（当前实现只在 JS 里做最简处理）

`exec(command, payload?)`

执行插入/包裹命令（基于 textarea 选区）
命令：`bold`、`italic`、`codeInline`、`codeBlock`、`heading`、`quote`、`ul`、`ol`、`hr`、`link`、`image`、`images`
`heading` payload：`{ level: 1..6 }`
`link` payload：`{ url: "https://..." }`
`image` 行为： payload.url：插入对应图片；payload 不提供则触发“单张上传”文件选择器
`images` 行为： payload.urls：批量插入；payload 不提供则触发“多张上传”文件选择器

`destroy()`

移除编辑器 DOM 与内部事件监听（适合 SPA 路由切换卸载）

独立渲染：`markdownToHtml(markdown, options?)` 可选

把 Markdown 转为安全 HTML 字符串（当前 MVP 覆盖标题、段落、列表、引用、分隔线、代码块、基础行内样式/链接/图片）

四、使用示例（选区插入）

命令基于 textarea 当前选区执行：有选区就对选区包裹/包入；无选区会使用默认占位内容。

// 光标处加粗（无选区时会插入占位 text）
editor.exec("bold");

// 插入标题（level=2）
editor.exec("heading", { level: 2 });

// 插入图片 Markdown（单张：payload 不提供则弹出“单张上传”）
editor.exec("image");

// 插入多张图片 Markdown（多张：payload 不提供则弹出“多张上传”）
editor.exec("images");

// 插入链接
editor.exec("link", { url: "https://example.com" });

配合自建上传接口（可选）：你可以在初始化时提供 `uploadImages`，把文件上传到自己的服务并返回 URL。

const editor = new YouyacaoMDEditor({
  el,
  uploadImages: (files) => {
    // TODO: upload files to your server/CDN
    // Must return: Promise<string[]> (urls in same order)
  }
});