wechat-editor-vue2

Vue 2 浏览器端微信 Markdown 编辑器组件。Markdown 内容结构、主题渲染以及微信 SVG/公式兼容规则复用自 doocs/md。

安装

npm install wechat-editor-vue2 [email protected]

使用

import Vue from 'vue'
import imageCompression from 'browser-image-compression'
import DoocsWechatEditor from 'wechat-editor-vue2'
import 'wechat-editor-vue2/style.css'

Vue.use(DoocsWechatEditor)

<template>
  <WechatMarkdownEditor
    ref="editor"
    :content.sync="markdown"
    :theme.sync="theme"
    :theme-css.sync="themeCss"
    :options.sync="options"
    :display-mode.sync="displayMode"
    :preview-mode.sync="previewMode"
    :preview-scale.sync="previewScale"
    :show-layout-switcher="true"
    :show-device-switcher="true"
    :upload-image="uploadImage"
    :image-compressor="compressImage"
    :sync-scroll="true"
    height="98vh"
    @render="onRender"
    @copy="onCopy"
    @selection-change="onSelectionChange"
  />
</template>

<script>
export default {
  data: () => ({
    markdown: '# Hello WeChat',
    theme: 'light',
    themeCss: '',
    displayMode: 'editorAndPreview',
    previewMode: 'mobile',
    previewScale: 1.5,
    options: {
      theme: 'default',
      primaryColor: '#256f53',
      isMacCodeBlock: true,
    },
  }),
  methods: {
    async compressImage(file) {
      return imageCompression(file, {
        maxSizeMB: 1,
        maxWidthOrHeight: 1920,
        useWebWorker: true,
      })
    },
    async uploadImage(file) {
      const formData = new FormData()
      formData.append('file', file)
      const response = await fetch('/upload', { method: 'POST', body: formData })
      const data = await response.json()
      return data.url
    },
    async getHTML() {
      const result = await this.$refs.editor.getWechatHTML()
      console.log(result.html)
    },
    getContent() {
      console.log(this.$refs.editor.getMarkdown())
      console.log(this.$refs.editor.getPlainText())
    },
    onSelectionChange(selection) {
      console.log(selection.text, selection.from, selection.to)
    },
  },
}
</script>

实例方法

• render()：立即刷新预览。
• getMarkdown()：获取编辑器当前最新的原始 Markdown 内容。
• getPlainText()：获取移除 Markdown 标记后的纯文本内容。
• getPreviewHTML()：获取当前预览 HTML。
• getWechatHTML()：获取经过 CSS 内联和微信兼容处理的 { html, plainText, hasPendingAsyncContent }。
• copyToWechat()：将 text/html 与 text/plain 写入浏览器剪贴板。
• setDisplayMode(mode)：切换组件展示模式。
• setPreviewMode(mode)：切换预览设备模式。
• focus()：聚焦编辑区。

content、theme 和 theme-css 是可响应的受控属性，分别对应 Markdown 原文、明暗主题（light/dark）和主题 CSS。它们更新时会立即同步编辑器和预览；编辑器内部修改时分别触发 update:content、update:theme 和 update:themeCss。直接属性的优先级高于 options.themeMode、options.customCSS 以及浏览器中保存的主题 CSS。原有的 v-model/value 和 options.themeMode/options.customCSS 用法继续兼容。

display-mode 默认为 editorAndPreview，可选 editorAndPreview（编辑器和预览同时显示）、editor（仅编辑器）和 preview（仅预览）。组件内部切换时触发 update:displayMode 和 display-mode-change，支持 .sync。

preview-mode 默认为 mobile，可选 pc 和 mobile。组件内部切换时触发 update:previewMode 和 preview-mode-change，支持 .sync。

底部状态栏会显示正文文字数和按约 400 字/分钟估算的推荐阅读时间。中间的布局切换图标与右侧的设备切换图标默认显示，可分别通过 :show-layout-switcher="false" 和 :show-device-switcher="false" 隐藏。组件仅在初始化时检测容器宽度：当初始 display-mode="editorAndPreview" 且容器小于 850px 时，会切换为仅编辑器并触发对应的模式更新事件。

sync-scroll 默认为 true，仅在 displayMode="editorAndPreview" 时启用编辑器和预览区的双向滚动联动；不需要时可设为 false。

在编辑区选中文本并结束指针操作时会触发一次 selection-change 事件，向父组件传递 { text, from, to }；text 是选中的原始 Markdown，from 和 to 是文档内的字符偏移位置。组件通过 pointerup 同时支持鼠标、触摸和手写笔，并稍作延迟以读取移动端长按选词后的最终选区；拖选过程、键盘移动和没有选中文本的单击不会触发。

手机模型支持 0.5 到 1.5 倍显示比例，可通过预览标题栏滑杆或 preview-scale 属性控制；变化时触发 update:previewScale 和 preview-scale-change。

图片按钮、粘贴图片和拖入图片共用 upload-image 上传函数。函数接收 (file, context)，其中 context.base64 是图片 Data URL，成功时返回图片 URL；组件随后在 CodeMirror 当前选区插入 ![](url)。可通过 image-compressor 注入 browser-image-compression，示例沿用主项目参数：最大约 1MB、最大宽高 1920px。上传过程会触发 upload-start、upload-success 和 upload-error。

顶部的亮色/暗色按钮会更新 theme，并同步切换组件界面、CodeMirror、文章预览以及 Mermaid、PlantUML、Infographic 等渲染内容。

“文章样式”中的“编辑主题 CSS”沿用原项目的自定义主题方案逻辑：支持多方案切换、基于空白/默认/优雅/简洁主题创建、重命名、删除、实时应用和 CSS 导出。方案保存在 MD_doocs-wechat-editor:css-content-config，重新打开编辑器会恢复当前方案。

编辑区使用 CodeMirror，并直接复用主项目的 Markdown 格式化命令，当前提供 H1–H6 标题、粗体、斜体、删除线、行内代码、链接、有序列表、无序列表和标准 Markdown 表格。标题按钮悬浮后可选择标题 1 到标题 6；列表按钮悬浮后可选择有序或无序列表；代码块按钮悬浮后可选择语言并直接插入；表格按钮悬浮后可从 4×6 网格中选择需要的总行数和列数。字体颜色、背景色、对齐、字距、行距和缩进仅由主题 CSS 控制，编辑器不会向 Markdown 写入对应的内联样式。文章样式面板支持主题、字体、字号和主色；配置变化通过 update:options 与 options-change 事件同步。

工具栏的“组件”入口已经内置原项目全部 7 个组件：MpProfile、QRCodeBlock、AuthorBlock、TipBlock、TableBlock、InfoGrid 和 BadgeGroup。组件以效果卡片平铺展示；点击卡片时，有参数的组件会弹出参数填写窗口，无参数的组件会直接插入 Markdown。

自定义组件由编辑器自身管理，无需使用方传入。可以在组件面板中创建、编辑和删除组件定义，定义保存在浏览器 localStorage 中。编辑器写入的浏览器存储键统一使用 MD_ 前缀。组件名称采用 PascalCase，模板沿用原项目的 HTML 模板与 {{prop}} 占位符规则，因此会进入同一套 Markdown 解析、主题变量替换、净化和微信格式转换流程。

富文本剪贴板要求 HTTPS 或 localhost。PlantUML 默认请求公共 PlantUML 服务；Mermaid、Infographic 和公式在复制前最多等待 20 秒完成渲染。

本地独立运行

该目录包含渲染器与共享配置所需的 vendored 源码，不依赖 doocs/md monorepo 的其他 workspace。复制或单独克隆本目录后即可运行：

pnpm install
pnpm dev
pnpm build

发布前可在本目录执行 npm pack --dry-run 检查 npm 包内容。

确认版本号后，可以执行 pnpm publish:npm。该命令会依次完成类型检查、测试、构建，并发布到 npm 官方仓库；npm 要求二次验证时，在终端提示中输入身份验证器验证码或一条未使用的恢复码。不要把验证码、恢复码或访问令牌写入 package.json。