棘手的微信公众号编辑器

发布日期： 2020-09-04 阅读量： 作者： 网络

棘手的微信公众号编辑器

相关学习推荐：微信公众号开发教程

公元 2019 年，微信公众号排版能力孱弱，始终为运营者所诟病，秀米、135 编辑器等工具割据一方。

但无论是微信原生工具，还是其他编辑器，都让创作者不得不将有限的创作经历分散到排版设计上。

Markdown 解决排版的灵丹妙药，应运而生。

一、引子

1.1 Markdown 是什么？

Markdown 是一种排版语法，拥有极简的输入方式和极低的学习成本。

富含了标题、引用、加粗、链接、图片、代码段、公式等一切在文字创作中需要的排版格式。

拥有它，让人专注于内容本身，而不被格式所打扰。

1.2 怎么和微信公众号结合？

这么优秀的排版语法，可是微信公众号也不支持呀。

别急！Markdown Nice 来帮你解决问题！

1.3 Markdown Nice 是什么？

一款开源 Markdown 编辑器，写完后即排版成功，复制即可粘贴到微信公众号。

So what？只有这点么？

当然不是！Nice宝宝你还有什么特性呀？

支持图床、脚注、代码、公式
支持 8 种排版主题和 7 种代码主题
支持自定义样式，可提交主题供人瞻仰
除了公众号外，还支持知乎、掘金、博客园和CSDN等平台
我颜值高呀

这么多优秀的特性摆在你面前，还在等什么？

地址：https://mdnice.com

快让你的微信排版 Nice 起来！

二、正文

没想到你还在看

咳咳、、、

不要小看Nice宝宝我，为了能够使用 Markdown 进行公众号排版，我可是和微信公众号编辑器做了半年的斗争，才赢得了现在的战果！

想听听我是如何战斗的？下面且听我娓娓道来！

2.1 战斗序章

微信公众号编辑器源于百度 FEX 前端团队的开源的 ueditor 项目，这可是宝宝我扒取了网页代码发现的，如图所示：

因为 ueditor 是富文本编辑器，所以我即将面临的是 markdown->富文本的转换战役，在开源界或者软件界这种转换战役有了相当多的优秀实现。比如：

Web端：editor.md、mavonEditor
PC端：typora、MWeb

但是上述工具都存在一个问题，没有很好地将 CSS 样式融入富文本中，进而适配微信编辑器，以至于国内其他各大平台的富文本编辑器。

那么有没有尝试弥补这一问题的工具呢？其实是有的：

Web端：md2all、wechat-format
浏览器插件：markdown-here

但是上述工具也各自有不完美的地方，于是Nice宝宝我发现了这个契机，把自己生产了出来，解决一切不完美！

Markdown Nice 是一个开源项目，由很多开源技术合体而成，其中主要包括：

React：facebook 开源的 js 视图层框架
markdown-it：markdown 转换富文本解析器
juice：将 CSS 类选择器转换为行内样式的工具
codemirror：网页代码编辑器
ant-design：React UI组件库
mobx：状态管理库
highlight.js：代码高亮库
MathJax-node：公式转图片库
axios、ali-oss、qiniu-js等

注：下文会提到上述某些开源库，开源库具体作用请参考此处。

在拥有上述技术傍身之后，我向微信编辑器宣战，打响了战斗第一枪！

2.2 战斗第一枪：代码主题

微信公众号在2018年以前，是完全不支持代码块的，目前的支持也很单一，并且存在代码字体较大的问题。

说来很气，微信公众号编辑器的开发者，就木有想过代码块对程序员群体是多么重要么？？

为此我找来了highlight.js代码高亮神器，帮助解决代码主题单一的问题。

经过一定的筛选后，最终选定了 atom-one-dark、atom-one-light、monikai、GitHub、vs2015、xcode 和微信代码主题共 7 个代码样式供大家选择。

其中微信代码主题由于其不属于highlight.js的归属范畴，故而其结构需要从微信公众号编辑器源码中获取，下面两张图展示了如何获取：

而 highlight.js 与 markdown-it 解析器是关联使用的，故而工具中存在 2 个 markdown 解析器，分别用于解析微信代码主题和其他代码主题，源码参考。

除了上述问题外，很多技术类公众号代码中会存在：一行代码过长导致的多行显示问题。

该问题使用以下 CSS 代码即可解决：

pre code {display: -webkit-box !important}复制代码

# 微信公众号编辑器

上一篇: Golang 类型安全对代码的可读性有何影响

下一篇: Golang函数重载在错误处理中的优势

棘手的微信公众号编辑器

随便看看