微信 Markdown 编辑器插件再升级

介绍

✍ WeChat Markdown Editor | 一款高度简洁的微信 Markdown 编辑器：支持 Markdown 语法、自定义主题样式、内容管理、多图床、AI 助手等特性

🏠网站首页： https://md-pages.doocs.org

❤️项目开源： https://github.com/doocs/md

v2.0.4

Release Note：浏览器插件支持 SitePanel 集成，增强页面侧边栏能力。

将 Markdown 编辑器和官方页面紧密结合起来了～～～～

！！！ 2.0.4 版本 已上架 edge 商店，Chrome/Firefox 平台正在处理中。

!!! Install From Edge!!!

截图表现

原理

预备动作：在微信公众号编辑器页面注入页面脚本和内容脚本（ Content Script ）。

通信路径：SidePanel -> Content Script -> 页面脚本，页面脚本和公众号编辑器页面共享一个 Context ，可以利用微信提供的 js api, MP_Editor_JSAPI

• SidePanel -> Content Script

使用 chrome.tabs.sendMessage 发送消息

• Content Script -> 页面脚本

    browser.runtime.onMessage.addListener((message) => {
      if (message.type === `copyToMp`) {
        console.log(`Copying content to MP editor:`, message.content)
        const customEventData = { type: `copyToMp`, content: message.content }
        window.postMessage(customEventData)
        return Promise.resolve(true)
      }
      return true
    })

通过 window.postMessage 通知页面脚本

• 页面脚本处理

页面脚本监听到消息后，将 SidePanel 的 markdown 渲染结果富文本填入到正文中，

window.addEventListener(`message`, (event) => {
	// 调用 __MP_Editor_JSAPI__
})

// 调用 MP_Editor_JSAPI

window.__MP_Editor_JSAPI__.invoke({
      apiName: `mp_editor_set_content`,
      apiParam: {
        content: event.data.content,
      },
      sucCb: (res) => { console.log(`设置成功`, res) },
      errCb: (err) => { console.log(`设置失败`, err) },
})

阅读更多

公众号 Markdown 插件功能小优化