用过秀米、壹伴编辑器、135编辑器等，公众号排版工具的小伙伴都知道，排版完成后最后都要点击一个“复制到公众号”的按钮，然后到公众号编辑器中粘贴才行。
直接在页面上选中内容，然后粘贴往往会出现错乱。这是什么原因，其中的实现原理又是什么呢？可以拆解为两个步骤：
🌟 技能一：样式内联化
你是否遇到过这样的烦恼：精心设计的样式在微信公众号编辑器中“失灵”了？这是因为微信编辑器不支持外部CSS，需要我们将样式直接内联到HTML元素中。别担心，开源库 Juice 来帮忙！
Juice 能够智能地将CSS规则转化为元素的 style 属性，让样式直接“贴”在元素上。只需简单几步，你的HTML就能变身为微信友好格式。来看个例子：
const juice = require('juice');
const html = `
<style>
h1 { color: red; }
p { font-size: 16px; }
</style>
<h1>Hello</h1>
<p>This is a paragraph</p>
`;
const inlinedHTML = juice(html);
console.log(inlinedHTML);
看，原本的CSS规则已经变成了元素的style属性，是不是很方便？
🌟 技能二：富文本粘贴
解决了样式问题，接下来是富文本粘贴。你是不是经常遇到复制的HTML代码在微信编辑器中变成了纯文本？这是因为我们需要以特定的HTML格式复制内容。
这里有一个小技巧，使用Web平台的 clipboard API来实现：
export const copyHtml = (text) => {
let input = document.getElementById('copy-placeholder');
if (!input) {
input = document.createElement('input');
input.id = 'copy-placeholder';
input.style.position = 'absolute';
input.style.left = '-1000px';
input.style.zIndex = '-1000';
document.body.appendChild(input);
}
input.value = 'Kainy';
input.setSelectionRange(0, 1);
input.focus();
document.addEventListener('copy', function copyCall(e) {
e.preventDefault();
e.clipboardData.setData('text/html', text);
e.clipboardData.setData('text/plain', text);
document.removeEventListener('copy', copyCall);
});
document.execCommand('copy');
}
通过这种方式，我们可以确保复制的内容在粘贴时能够保持原有的格式，无论是HTML还是纯文本。
其中奥秘在于：
e.clipboardData.setData('text/html', text) 将指定的文本设置为剪贴板的 HTML 格式数据。这种格式适用于支持粘贴 HTML 内容的应用程序，例如富文本编辑器或电子邮件客户端。如果目标应用程序支持 HTML 格式的剪贴板数据，那么设置了 HTML 格式的数据将被使用。
e.clipboardData.setData('text/plain', text) 将指定的文本设置为剪贴板的纯文本格式数据。这种格式适用于大多数应用程序，包括文本编辑器、文本框和终端等。如果不支持粘贴 HTML 内容，那么设置了纯文本格式的数据将被使用。
通过设置两种格式的剪贴板数据，可以提供更好的兼容性，以确保在不同的应用程序和粘贴场景中都能够成功地粘贴文本内容。
🚀 结语
掌握了 Juice 和 clipboard API，你的公众号图文编辑工作将变得更加得心应手。当然，实际开发中还有很多细节需要考虑，比如排版、性能优化等，但掌握了这些核心技能，你已经迈出了成功的第一步！
