应使用 navigator.clipboard.write() 配合 clipboarditem 并声明 "text/html" 类型，且 html 字符串中 、& 需分别转义为 <、>、&，safari 16.4+ 才支持该 api。
复制 HTML 字符串时被自动转义，粘贴后显示为纯文本
直接调用 navigator.clipboard.writeText() 传入含标签的字符串（比如 "<p>Hello</p>"），浏览器会把它当普通文本处理，不会保留 HTML 结构。粘贴到支持富文本的地方（如 Word、Notion）仍是带尖括号的原始字符串，不是渲染后的段落。
真正要“复制 HTML 源码”并让目标应用识别为可渲染内容，得用 navigator.clipboard.write() 配合 ClipboardItem，显式声明 "text/html" 类型：
const htmlString = "<p>Hello <strong>world</strong></p>";
const blob = new Blob([htmlString], { type: "text/html" });
await navigator.clipboard.write([
new ClipboardItem({ "text/html": blob })
]);
注意：HTML 字符串里的 和 <code>> 必须手动转义为 < 和 >，否则部分浏览器（如 Safari）会拒绝写入；& 也要转成 &。
Chrome/Firefox 支持 write()，但 Safari 16.4+ 才支持 ClipboardItem
老版本 Safari（ClipboardItem 构造函数，调用会报 TypeError: ClipboardItem is not a constructor。不能只靠 typeof ClipboardItem !== 'undefined' 判断，得兜底 fallback 到 writeText()：
- 先尝试
write()+ClipboardItem，成功则用 HTML 格式 - 失败（包括权限拒绝、构造失败、写入异常），降级为
writeText()，同时把源码缩进清理掉（比如用.replace(/\s+/g, " ")压成单行），避免换行符在某些编辑器里引发格式错乱 - 权限问题（如非安全上下文、用户未授权）会触发
NotAllowedError，需捕获并提示用户手动触发（比如点击按钮再执行）
从编辑器取 HTML 内容时，别直接 innerHTML，小心 script/style 注入
如果编辑器是 contenteditable 区域或基于 iframe 的富文本框，直接读 element.innerHTML 可能拿到用户插入的 <script></script> 或 <style></style> 标签——这些不该被复制出去，尤其当目标是文档归档或分享源码时。
更安全的做法是：
- 过滤掉
<script></script>、<style></style>、<iframe></iframe>等危险标签（用正则或 DOMParser 清洗） - 若编辑器用的是 Markdown 转 HTML 渲染，应从原始 Markdown 源或经 sanitize 后的 HTML 输出取值，而非 DOM 快照
- 对属性值做基础转义：比如
src="javascript:alert()"这类危险 URL，要在复制前替换为空或"#"
按钮点击后没反应？检查是否在用户手势上下文中调用
navigator.clipboard.write() 和 writeText() 都要求必须由用户主动触发（如 click、keydown），不能在异步回调（如 setTimeout、fetch.then）里调用，否则会立即抛 NotAllowedError。
常见翻车点：
- 按钮绑了
debounce，实际执行延迟了，脱离了点击事件流 - 用了
async/await但没把clipboard.write()放在顶层await链中，而是包进了 Promise 构造函数 - React 中用了
useEffect自动执行，而非响应用户点击
最稳写法：按钮 onClick 回调里直接 await clipboard 方法，中间不穿插其他异步跳转。
HTML 复制不是简单拼字符串，关键在类型声明、转义控制、运行时环境兼容和用户交互时机——漏掉任意一环，粘贴出来就只是“看着像 HTML”的文本。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
