答案：通过异步write()和read()方法操作剪贴板，结合clipboard-write和clipboard-read权限，可在安全上下文中实现html等富文本的复制粘贴，需用blob封装数据并处理兼容性问题。
通过 Clipboard API 实现富文本内容的复制与粘贴，关键在于使用异步方法 write() 和 read() 操作剪贴板数据。现代浏览器支持将 HTML、文本甚至图片等格式写入剪贴板，并在粘贴时读取这些富文本内容。
启用异步剪贴板权限
Clipboard API 基于异步操作，需确保用户上下文（如点击事件）中调用，并获取相应权限：
- 请求
clipboard-write权限用于写入 - 请求
clipboard-read权限用于读取 - 大多数浏览器默认在安全上下文中允许这些操作
async function checkWritePermission() {
const { state } = await navigator.permissions.query({
name: 'clipboard-write'
});
return state === 'granted';
}
复制富文本到剪贴板
使用 clipboard.write() 可以写入多种数据类型，包括 HTML 格式的内容：
async function copyRichText(html, text) {
const htmlBlob = new Blob([html], { type: 'text/html' });
const textBlob = new Blob([text], { type: 'text/plain' });
const data = [
new ClipboardItem({ 'text/html': htmlBlob }),
new ClipboardItem({ 'text/plain': textBlob })
];
await navigator.clipboard.write(data);
}
调用示例：
copyRichText( '<b>加粗内容</b> 和 <i>斜体字</i>', '加粗内容 和 斜体字' );
从剪贴板读取富文本内容
使用 clipboard.read() 获取剪贴板中的多种格式数据：
async function readRichText() {
const clipboardItems = await navigator.clipboard.read();
for (const item of clipboardItems) {
for (const type of item.types) {
const blob = await item.getType(type);
const text = await blob.text();
if (type === 'text/html') {
console.log('HTML 内容:', text);
return text;
}
}
}
}
注意：读取剪贴板需要用户授权且只能在用户触发的事件中执行。
兼容性与注意事项
- 仅在 HTTPS 或 localhost 环境下可用
- 部分旧浏览器不支持 ClipboardItem，需做特性检测
- 某些编辑器或应用可能只粘贴纯文本，取决于目标应用是否支持 HTML 格式
- 避免频繁操作剪贴板，防止被浏览器拦截
基本上就这些。只要按规范处理 MIME 类型和权限，就能实现跨应用的富文本复制粘贴。实际效果还取决于接收端是否解析 HTML 格式。
