如何通过 Clipboard API 实现富文本内容的复制与粘贴？-js教程-PHP中文网

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

夜晨

发布： 2025-10-11 09:36:02

原创

314人浏览过

答案：通过异步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 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);
}

登录后复制

调用示例：

Sider

多功能AI浏览器助手，帮助用户进行聊天、写作、阅读、翻译等

3159

查看详情

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;
      }
    }
  }
}

登录后复制

注意：读取剪贴板需要用户授权且只能在用户触发的事件中执行。