字数 2221，阅读大约需 12 分钟

一款简约大气的markdown编辑器，告别手动copy样式，一键发布到微信公众号

作为一名长期的内容创作者，我深知在微信公众号后台排版的种种不便：样式单调、操作繁琐、预览效果和最终发布总存在差异……于是一个想法诞生了：为什么不能有一款更强大、更便捷的工具？带着这个初衷，我在网上开始寻找类似好用的开源项目，于是我发现了WeChat Markdown Editor^[1]，拉下来之后有些功能是我不需要的，而我又需要一些新的功能，于是便有了这段二开之旅。身为一个后端程序员，对于前端可谓是知之甚少，想要独立完成一个项目是十分困难的。得益于AI的快速发展，结合js所见即所得的特性，不断的去修改、去测试，才将编辑器^[2]改好并成功上线。接下来，我们一起走进编辑器看看吧。

系统介绍

总述

如图所示，编辑器的整体UI没有做过多改变，删除了复制样式，顶部新增了AI助手，微信公众号菜单，侧边栏新增了两个分组，默认分组是用户在本地编辑的，微信公众号(在配置好微信公众号配置之后，这个后面再说)则可以回显已经发布到微信公众号的所有草稿。字体在最初试着导入了很多字体，如钉钉进步体等，但经过反复测试发布到微信公众号的草稿中，发现不在支持的字体族中，字体样式会丢失，内置的样式模板也遇到了某些样式无法适配，反复测试后仍不适配的就给删掉了。下面将一一介绍系统的全部功能。

文件

文件菜单包含

• • 新建文章
• • 导入.md
• • 导入公众号文章
• • 插入模板
• • 导出.md
• • 导出.html
• • 导出长图
• • 深色模式
• • 左侧编辑
• • 同步滚动

新建文章

点击新建文章或者使用ctrl+alt+n快捷键即可在默认分组下创建一个新文章。

导入.md

点击导入.md可将外部的md文件导入到当前文章(配合新建文章使用)

导入公众号文章

复制现有公众号文章的链接到输入框中，点击导入即可将推文导入到当前文章(配合新建文章使用)

插入模板

内置多种类型的模板，快捷选择，不再为样式发愁

导出.md

点击导出后会自动下载.md文件到本地

导出.html

点击导出后会自动下载.html文件到本地

导出.docx

点击导出后会自动下载.docx文件到本地

导出长图

点击导出长图之后会弹出对话框，可以自行选择质量和格式导出，图太长的原因就不贴了

深色模式

根据是否勾选深色模式来切换主题模式

左侧编辑

根据是否勾选左侧编辑来调整编辑和预览区域的左右位置

同步滚动

根据是否勾选来改变编辑区域和预览区域同步滚动

AI助手

• • AI配置

AI配置：通过AI助手新增配置去调用AI接口帮助写作

快捷键

记录了支持的一些快捷键，方便查看。

• • 新建文章
• • 行内代码
• • 删除线
• • 超链接
• • 格式化
• • 加粗
• • 斜体
• • 保存
• • 全选
• • 撤销
• • 重做
• • 查找
• • 复制
• • 粘贴

样式

涵盖了编辑器内容的一些样式调整

• • 主题：经典、优雅可供选择
• • 字体：系统默认微软雅黑、可以切换平方字体
• • 字号：提供了12-16px大小字号可供选择
• • 主题色：内置了经典蓝、翡翠绿、玫瑰金等主题色可供选择
• • 图注格式：title优先、alt优先、只显示title、只显示alt、不显示可供选择
• • 代码块主题：github-dark(默认主题)、xcode、1c-light等代码块主题可供选择
• • 自定义主题色：点击色卡自由切换颜色
• • 自定义css：自定义容器及其各种元素的样式
• • 微信外链转底部引用：打开之后文章底部会显示引用链接
• • 统计字数和阅读时间：打开之后文章顶部回显示字数和阅读时间
• • Mac代码块: 打开之后代码块会加上特有的顶部Mac样式
• • 段落首行缩进：开启之后所有的段落都会加上2格的缩进

微信公众号

• • 配置配置AppID,AppSecret,代理域名之后才能正常调用微信接口，具体可参考微信官方接口文档^[3]

  

• • 素材库素材库管理的是永久素材

在图片代理 URL未配置的情况下，会出现此图片来自微信公众平台，未经允许不可引用的字样;素材库能正常上传和回显图片、音频、视频，但是目前支持图文的插入和发布，音频及视频暂不支持。

帮助

默认文章：介绍了markdown的主要语法，示例文章一篇

关于：项目的一些详情，可以找到github仓库地址，提issue以及联系作者

开启/关闭左侧边栏

是否展示左侧的侧边栏

主题切换

点击月亮和太阳以切换Light和dark主题

发布

发布按理说应该放置在微信公众号菜单下的，但是为了写完能够及时的发布，就单独提到了外面。

如图所示，在输入文章标题、文章作者、文章摘要，并选择完文章封面之后，就可以点击保存草稿了，发布文章的功能也是先保存为草稿，然后发布草稿，将两个接口合二为一调用了。需要说明的一点是发布文章需要认证的公众号才能解锁调用权限，我的公众号未认证，因此，发布文章接口没有测试通过。

开启/关闭右侧边栏

是否展示右侧的侧边栏(目录栏)

右键菜单

除AI助手，添加为引文外，其他的均和文件菜单下的的二级菜单的功能一致，右键触发的方式便捷调用。

侧边栏微信公众号文章

点击微信公众号后会去请求所有的草稿

直接ctrl+v复制或者拖拽进编辑器上传的图片不占用公众号的素材库中图片数量的100000个的限制。官方说仅支持jpg/png格式，大小必须在1MB以下，另外测试在官方的编辑器中上传GIF图片会有300帧的大小限制。

但本人实测，有时4.5MB的500多帧GIF图片也能成功上传，有时又不行，多次反复实测在330帧以下接口上传一般都会成功，失败的时候会出现下图的错误。

重点说一说AI助手和添加为引文吧，在已经配置好AI配置的前提下，就可以通过右键的方式触发AIChatPanel去和AI对话辅助写作了。添加为引文的意思是可以通过光标选中内容的方式引用正文内容，AI对话的时候就可以参考引文内容做出回答。另外还内置了一些提示词，用户也可以自定义添加新的提示词(这个同样是保存在indexedDB中的，一旦清空，那么自定义的提示词也会被删除，谨慎操作)，会话支持导出长图，确认AI回答没问题之后，可以点击插入便捷将内容插入回编辑器原文中。具体操作请看下图

微信公众号

点击微信公众号侧边栏之后，会去请求现有的所有草稿，并分页回显。

点击具体的草稿，可以查看具体的内容并做出修改，需要注意的是，这里直接修改之后，是不会保存到本地的，修改之后请尽快重新发布到微信草稿中。

写在最后

使用过程中遇到什么问题或者有什么好的建议，欢迎提issue或者联系作者修改。觉得本项目还不错的话，欢迎在关于中去赞赏作者哦。

引用链接

[1]WeChat Markdown Editor:https://github.com/doocs/md[2]编辑器:https://github.com/wjcly/wx-editor[3]微信官方接口文档:https://developers.weixin.qq.com/doc/service/api/