编辑器优化

第一篇：mp_editor_jsapi —— 直接写入编辑器#

它是挂在公众号编辑器页面 window.__MP_Editor_JSAPI__ 上的一组接口，面向”在编辑器里运行的第三方插件”（invoke 调用 / on 监听）：

对我们就是：把”复制 → 粘贴”升级成”直接写进编辑器”，绕开剪贴板与粘贴时的清洗不确定性，还能读回内容、监听改动（做成双向同步）。代价是需要一个”编辑器插件”的身份（这两页给的是接口规范，接入/上架流程没写在这里）。

另有一条互补的官方路线（这两页没提，但和我们已有能力正好接上）：服务端草稿箱 API——直接把 HTML 写进草稿箱；我们已经做了公众号绑定（AppID/AppSecret），这条路不需要上架插件。秀米那类”同步到公众号”走的就是它。

第二篇：plugin_spec —— 约束 + 官方校验器（立刻可用）#

它不是”插件怎么装”，而是文章 HTML/CSS 的合规规范，而且配套了官方校验能力：

• 线上接口：POST http://mp.weixin.qq.com/article-bin/verify_article_structure，传 content，回 isValid + inValidInfo（width / height / 其他，且每条违规带元素的 outerHTML）；
• 开源仓 wechatjs/verify-article-structure-spec：verify_article_structure.md 是规则真理源；cli/ 有 check（puppeteer 真实浏览器量布局）和 dedupe（真删掉冗余嵌套），能接 CI。npm 包还没公开，得从源码构建。

与我们最相关的几条（我已把规范原文抓下来放在 Temp/tb/verify_article_structure.md，836 行）：

• 第 3 章「字体」：不建议设置任何 font-family（平台有优化过的默认栈）—— 这条直接命中我们：::text-style{font=…} 转出来的复制 HTML 里带着 font-family，按规范属于该收敛的写法。
• 1.4 width：固定宽度引发”居中不一致 / 溢出 / 不同屏占比不一”三类问题；<img> 建议带 data-w（缺了会被判宽度违规或误报）；整棵子树可用 data-ignore-width 豁免。
• 2.1 嵌套层级：同名标签 + 同内联样式 + 只含单个子节点的连续嵌套 ≤ 10 层（超出编辑器会自动精简）。
• 1.3 line-height 过小会叠字（图片无缝拼接场景豁免）、1.5 height:0 在移动端整块不可见、1.8 别用 <pre> 包正文。
• 第 4 章 Dark Mode：颜色会被算法平衡、渐变背景会被转纯色；data-no-dark、data-ignore-dm="low-contrast text-bg-gradient" 是节点级豁免；并且不要用 !important。

它顺带解释了我们踩的坑#

规范只发”问题写法”清单、不发支持白名单，所以 display:grid 被吞不是偶然——第三方逆向整理的支持集里 display 只有 block/inline/inline-block/flex（没有 grid），而 flex-*、gap、object-fit 在支持集内，表格当然也在（跟我们实测一致）。于是有了三条可选路线：

1. 马上做（便宜）：把复制产物按规范收一遍——去掉 font-family、给 <img> 补 data-w、深色模式视需要加豁免；并把官方 check/dedupe 变成我们的验证手段，不再靠”粘进去看看”。⚠️ 一条要你拍板：去掉 font-family 意味着放弃复制品里的字体区分（编辑器本就倾向用自己的默认栈，但你的字体选择器是显式意图）。
2. 想做再做：拼图从表格换回 flex + gap（在支持集内），这样能拿回 4:3 裁切、与页面完全同构；表格留作兜底。
3. 长期：走 mp_editor_jsapi 插件 或 草稿箱 API，把”复制粘贴”整个换成”直接写入草稿箱”。

你想先从哪条走？我的建议是先做 ①，因为它能立刻把”排版对不对”从主观试错变成可跑的规则校验；②要不要换回 flex，最好等 ① 做完、你拿官方 check 跑一遍我们现在的表格产物再定。