富文本框如何瞄点_论如何从本质的角度驾驭微信推文排版

一篇文带你了解微信图文编辑最本质的原理，预计阅读时长约15分钟。 

大三下开学时刚开这个公号，想着写写过去关于微信图文排版的想法和发现。然而随之而来的是紧张课程、尚未安定的实习与毕业去向的多重洗礼。那些开学时候爆发的妄想也逐个搁置，构思了许久的本文也一拖再拖，转眼便过去大半年。

上周六以工作人员的身份参与了 TWeb Conf 2019，听了负责腾讯文档的工程师关于排版与富文本编辑相关话题的分享。想起开学时候在这方面曾有过的思考，也是时候把它整理下来了。

TWeb Conf 2019

缘起

过去我在 ISCNU 写过不少推文，用过类似秀米、135、yiban.io、xmt.cn 等各种图文排版工具。常碰到身边的朋友因为推送的格式错乱不断地删掉重来的苦恼。纵览整个互联网，发现其中流传的许多这方面的所谓“干货”文章基本都没介绍到其中关键，还是停留在各种编辑器之上，弯弯绕绕而不得要领，于是便有了写这篇东西的想法。

微信公众平台可以说本质上是模仿 Web 模式的产物，它的运作也重度依赖着 Web 技术。通过 Web 的思维模式去思考，可以帮助我们更好地驾驭它。

也许你会困惑，Web 究竟是啥？让我简单地介绍介绍。

Web (World Wide Web)，中文名“万维网”，是一个在互联网上运行的多个文档互相链接形成的信息系统。对一个文档来说，除了它要表达的信息以外，还能提供辅助读者找到另一个相关的文档的“链接”，读者通过这个“链接”，可以快速获得这一文档，这样一系列 “加载”→“阅读”→“加载”→“阅读”... 的过程串联起来，就是传说中的“网上冲浪”了。

从维基百科首页的超链接出发形成的网络
来源： https://zh.wikipedia.org/wiki/万维网

Web 中的这一个个的文档便是我们所说的“网页”。严格上来说，它的名字叫“超文本”(Hypertext)，链接叫做“超链接”(Hyperlink)。为了适应记录和链接这样的需求，同时考虑到开放的需要，人们设计了超文本的格式规范。超文本所对应的规范，便是 HTML (HyperText Markup Language)，中文翻译是“超文本标记语言”。我们常说的写网页，就是围绕着 HTML 去写各种各样的代码，最后浏览器会识别 HTML 代码，输出对应的图像展示给用户。

微信推文的本质

微信公众平台模仿和依赖着 Web，其中的文档的单位 —— 图文推送的本质，也是用 HTML 语言表达的 超文本文档，直白地说就是一个网页，但我们只能修改这个网页的其中一部分。 HTML 怎么写并不是这里的第一关注点，而在于这门语言在表达什么。具体来说，这门语言表达的，是类似标题、段落、列表、图片、视频等等元素组成的结构，各个元素拥有自己的字体大小、颜色、背景、位置等属性，它们互相配合，构成了一个描述页面该如何展示的模型。 这样的模型是通用的，不仅仅是网页，在 Word 等文字处理工具的背后，也有类似的模型存在。在 Web 开发领域࿰