这事你多半遇到过。你复制一个排得挺好看的块——一张标题卡、一个带色的标注——粘进公众号编辑器或 CMS。有时它过去后一模一样地对；有时它落地成一段光秃秃的文字，设计全被扒掉了。同样的操作，不同的结果，感觉像是随机的。其实不是。区别在于你复制的是不是内联 HTML。
搞懂这一个概念，带格式粘贴就从碰运气变成可预期。
内联 HTML 到底是什么
网页样式可以待在两个地方。在一个普通网站里，样式待在一份单独的样式表里，HTML 只用 class 名去引用它：<div class="title-card">。这个 div 单独拿出来没有意义——设计待在别处的一个 CSS 文件里。
内联 HTML 则把样式放进元素自己身上：<div style="background:#2b6cb0; color:#fff; padding:16px; border-radius:8px">。渲染这个块所需的一切，都跟着块一起走。没有要依赖的外部文件。
这个区别，就是"为什么有些粘贴保住了设计、有些没保住"的全部答案。当你粘进一个编辑器时，编辑器拿不到源网站的样式表。如果设计待在那份样式表里，它就没了——你得到光秃秃的结构，也就是看起来像纯文本的东西。如果设计是内联的，它就跟着过来，块也就正确渲染了。
为什么公众号和富文本编辑器需要它
公众号编辑器很严。它会移除外部样式表，过滤掉大量样式。一个依赖别处定义的 class 的块，一旦进了公众号就无可依靠。很多富文本编辑器和 CMS 的粘贴框也是这个脾气——它们会净化你粘进去的内容，只保留内联属性。
所以，把一个样式块可靠地搬进这些编辑器的办法，就是把它复制成内联 HTML，让样式自成一体。这样，哪怕是严格的编辑器也拥有了按设计显示这个块所需的一切。
"带格式"复制块是怎么运作的
现代浏览器有一套 Clipboard API，能把富内容——带格式的 HTML——放到剪贴板上，而不只是纯文本。当一个工具把块"复制成内联 HTML"时，它就是在用这套 API，把块那份自成一体的标记放上你的剪贴板。接着你在编辑器里粘贴（Ctrl/Cmd+V），因为样式是内联的、剪贴板又带着 HTML，块就带着样式出现了。
这要成立，两件事得同时为真：
- 标记必须是内联样式的，这样才不需要外部文件。
- 剪贴板必须以 HTML 的形式携带它，而不是把尖括号当纯文本倒出来。
两样都对，粘贴就"自然就成了"。少了任意一样，你得到的要么是纯文本，要么是一堵看得见的代码墙。
不用手改代码也能做到
理论上，你可以拿一个样式块,手动把每一条样式内联进去——把每个 class 的规则搬进每个元素的 style="" 属性里。但凡块稍微复杂一点，这就既繁琐又容易出错，尤其是 SVG 卡片，样式散在许多节点上。
用一个替你处理的工具更省事。IMG.DIY 的公众号排版模块提取从你粘进去的公众号内容里提取样式块，并给每个块一个复制按钮——通过 Clipboard API 把它作为内联 HTML 放上剪贴板。你点复制，切到公众号编辑器（或你的 CMS、或一个富文本框），粘贴，块就保住了格式。不用手动内联，也不用去修坏掉的标记。
一份粘贴速查清单
当带样式的粘贴出岔子时，过一遍这几条：
- 你复制的是内联 HTML，还是截图/纯文本？ 只有内联 HTML 才会作为可用的样式块粘进去。
- 粘进编辑器正常的正文区，别粘进"源码"或"纯文本"模式，那些模式可能会剥掉或转义标记。
- 在预览里看看这个块。 公众号自带的预览会显示块在手机上实际怎么渲染——发布前先在那儿确认。
- 颜色不对就先改色再复制。 在提取器里你可以点一处颜色、把块里所有相同颜色一起改，这样你复制出来的就已经是你的品牌色了。
有一条限制值得再说一遍：这类工具是复制和整理块的——它是个提取器，不是从零开始的模板设计工具，也没法通过网址抓文章（浏览器会拦截对公众号页面的跨站抓取，所以你得把内容粘进去）。在这个边界之内，内联 HTML 正是让一个样式块从一个编辑器搬到另一个还能保住设计的关键。
等你见过几次块完美粘进去之后，先前那种"随机感"就说得通了：它从来不是随机的。它一直取决于样式有没有跟在块里一起走。