如何通过 Clipboard API 实现富文本内容的复制与粘贴？

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

如何通过 Clipboard API 实现富文本内容的复制与粘贴？

2025-10-11

浏览次数：次

返回列表

答案：通过异步write()和read()方法操作剪贴板，结合clipboard-write和clipboard-read权限，可在安全上下文中实现HTML等富文本的复制粘贴，需用Blob封装数据并处理兼容性问题。

如何通过 clipboard api 实现富文本内容的复制与粘贴？

通过 Clipboard API 实现富文本内容的复制与粘贴，关键在于使用异步方法 write() 和 read() 操作剪贴板数据。现代浏览器支持将 HTML、文本甚至图片等格式写入剪贴板，并在粘贴时读取这些富文本内容。

启用异步剪贴板权限

Clipboard API 基于异步操作，需确保用户上下文（如点击事件）中调用，并获取相应权限：

请求 clipboard-write 权限用于写入
请求 clipboard-read 权限用于读取
大多数浏览器默认在安全上下文中允许这些操作

示例：检查并请求写权限

async function checkWritePermission() {
  const { state } = await n*igator.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 n*igator.clipboard.write(data);
}

调用示例：

秀脸FacePlay

一款集成AI换脸、照片跳舞等多种AI特效玩法的App

124 查看详情秀脸FacePlay

copyRichText(
  '<b>加粗内容</b> 和 <i>斜体字</i>',
  '加粗内容 和 斜体字'
);

从剪贴板读取富文本内容

使用 clipboard.read() 获取剪贴板中的多种格式数据：

async function readRichText() {
  const clipboardItems = await n*igator.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;
      }
    }
  }
}