众所周知,微信推文编辑是一件麻烦的事情,同时也衍生出许多各种各样的推文编辑器。但还是常常遇到样式错乱的问题。仔细研究发现微信的推文编辑器基于启用了 ContentEditable 的 div 元素实现。
Medium 上有篇文章,介绍了富文本编辑器涉及到的问题:可视化的空间和 DOM 的不完整映射。
Why ContentEditable is Terrible - Medium Engineering
把图文编辑和排版抽象到可视化这一层并不可靠,最根本的方法还是直接编辑 DOM,过去有写过一篇简单的分析:
论如何从本质的角度驾驭微信推文排版
我们写文章一般精力主要放在内容和结构上,很多时候不需要花费精力考虑排版的问题,Markdown 正是一门适合表达内容和结构的语言。
然后形成以下的推文编辑流程:
- Markdown 版本的内容和结构
- 针对不同元素应用对应的样式,生成最终的 HTML
- 把生成的 HTML 复制到微信后台,再根据 DOM 结构做进一步微调
找了一堆 Markdown 编辑器,找到三个面向微信公众平台图文编辑的工具:
- 程序猿DD - 常用工具:Markdown转换工具
- 微信公众号格式化编辑器 - lyric.im
- Markdown Nice
比较之后发现还是 Markdown Nice 最接近这里的需求~ 而且还支持自定义样式,十分灵活。