有时候我们需要在用户复制网站内容时，给复制的内容加上一些而外的信息，比如网站和作者，起到维护版权和宣传的作用，这个需求还是挺有意思的。
实现的伪代码如下
window.addEventListener('copy', (e) => {
const selection = window.getSelection();
const range = selection.getRangeAt(0);
const formatHTML = getFormatedHtml(getRangeHtml(range), extraData);
evt.clipboardData.setData('text/plain', getCopyText(getRangeHtml(range), extraData));
evt.clipboardData.setData('text/html', formatHTML);
})
上面代码中通过evt.clipboardData.setData方法来修改clipboardData，以此达到增加二外信息的目的。但是这个有个缺点就是兼容性不够，不是所有浏览器器都能使用。
因此我们还需要一个hack的方式来处理无法设置clipboardData的情况，hack的方式总结一句话就是移花接木，在copy事件handle中，通过Range.cloneContents()方法获取到用户选中的内容，并把clone下来的内容与额外信息一起塞到一个隐藏的div中，这时候修改光标选中这个隐藏的div，用户复制这个div里的内容了，目的达成。
这个hack方式需要注意的有两点：
- 事后需要恢复光标。
-
clone下来的内容与额外信息需要先用pre标签包裹，以防止复制的格式丢失。
hackCopy(html, range) {
const dom = document.createElement('div');
dom.innerHTML = html;
dom.style.position = 'fixed';
dom.style.left = '-9999px';
document.body.appendChild(dom);
// 选中隐藏dom，这时候用户复制的就是这个dom的内容了
window.getSelection().selectAllChildren(dom);
setTimeout(() => {
try {
// 事后恢复光标
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
} catch (e) {}
document.body.removeChild(dom);
}, 0);
}
有了这个思路，完整实现web复制黏贴中添加额外信息的需求应该不难了
