能否通过单个ClipboardItem同时存储text/html与text/plain类型？

问题背景 #

我需要实现复制功能：在支持HTML的场景粘贴可点击的链接文本，在不支持HTML的场景（如谷歌搜索框、简易编辑器）仅粘贴纯URL。目前已实现HTML场景的功能，但添加text/plain类型后，非HTML场景并未按预期 fallback到纯URL，而是出现异常。

问题原因 #

• 应用优先级选择问题：部分应用（如谷歌搜索框）会优先读取剪贴板中的text/html类型，即使它们无法渲染HTML，也会直接粘贴HTML源码而非切换到text/plain。
• MIME类型顺序影响：当前代码将text/html放在ClipboardItem的首位，部分应用会按提供的顺序优先选择第一个可用类型。
• HTML片段不规范：仅提供<a>标签的片段，不符合部分剪贴板系统对HTML内容的规范要求（需要完整的HTML文档结构）。
• 缺少专用URL类型：未添加text/uri-list类型，该类型是专门用于存储URL的标准MIME类型，很多纯文本场景会优先识别它。

可行的解决方案 #

调整MIME类型顺序+规范HTML结构+添加专用URL类型 #

修改代码，做以下几点优化：

• 将text/plain和text/uri-list放在ClipboardItem的前面，让纯文本优先的应用优先读取。
• 用完整的HTML文档结构包裹链接片段，提高兼容性。
• 添加text/uri-list类型，专门处理纯URL场景。

修改后的代码：

window.copyLinkWithText = (url, visibleText) => {
  try {
    // 规范HTML结构，用完整的html+body包裹
    const htmlSnippet = `<html><body><a href="${url}">${visibleText}</a></body></html>`;
    const plainTextSnippet = url;
    const uriListSnippet = url; // text/uri-list只需要纯URL

    const blobHtml = new Blob([htmlSnippet], { type: 'text/html' });
    const blobText = new Blob([plainTextSnippet], { type: 'text/plain' });
    const blobUri = new Blob([uriListSnippet], { type: 'text/uri-list' });

    const clipboardItemInput = new ClipboardItem({
      'text/plain': blobText,
      'text/uri-list': blobUri,
      'text/html': blobHtml
    });

    navigator.clipboard.write([clipboardItemInput])
      .then(() => console.log("已复制HTML、纯文本和URL到剪贴板"))
      .catch(err => console.error("复制剪贴板出错:", err));
  } catch (ex) {
    console.error("copyLinkWithText函数异常:", ex);
  }
};

额外说明 #

这种实现是完全可行的，只要遵循剪贴板的MIME类型规范，调整优先级并补充必要的类型，就能覆盖绝大多数场景：

• 支持HTML的编辑器（如Word、富文本编辑器）会读取text/html，渲染可点击链接。
• 纯文本场景（如谷歌搜索框、记事本）会优先读取text/plain或text/uri-list，粘贴纯URL。

内容的提问来源于stack exchange，提问作者Anduel Karamani