今日想要给博客增加版权信息，不仅要在每一篇博文的最后添加，还有在博客内任一地方的复制功能上添加版权信息

oncopy 、onpaste、oncut事件

以上事件分别为复制、粘贴、剪切事件，这类事件会返回 ClipboardEvent 事件对象 。

MDNClipboardEvent

这是 MDN 官方的资料，paste事件我在之前我的编辑器里有提到 daiEditor---一键生成符合hexo框架markdown文件 ，经过我多次测试setData()方法 chrome 是不兼容的。

那么要如何限制在博客内的复制功能，添加版权信息呢

多次尝试之后，才注意到一个细节：
oncopy、oncut、onpaste事件的出发时间都是在实际 复制、剪切、 粘贴操作之前！之前！！之前！！！触发的，重要的事情要讲三遍。

开发思路：那么想要在复制时追加自己的版权信息，只需要修改我们选中的内容就好了

第一步：浏览器添加copy事件，先获取最先选中的 html 格式的内容

window.addEventListener('copy', function(event) {    
    // 获取浏览器选中部分
    const selection = window.getSelection();


    // 获取选中范围 调用cloneContents()方法复制 DocumentFragment 对象，获取选中 html格式内容
    const range = selection.getRangeAt(0);
    const docFragment = range.cloneContents();
    const hiddenBox = document.createElement('div'); 
    hiddenBox.style.position='absolute'; 
    hiddenBox.style.left='-99999px'; 
    
    hiddenBox.appendChild(docFragment);    
    let copytext = hiddenBox.innerHTML;

第二步：添加版权信息

     // 添加版权信息后缀
    copytext += `
<br><br>
    作者: 猫十一 <br>
    链接：${location.href} <br>
    来源：<a href="https://db324246.github.io/">猫十一の纸盒子</a> <br>
    著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。`;

第三部：添加一个隐藏的div，将修改的内容添加进去，再修改浏览器的选中内容就可以了

    // 添加隐藏的div 修改浏览器的选中内容 以供复制
    var newdiv = document.createElement('div'); 
    newdiv.style.position='absolute'; 
    newdiv.style.left='-99999px'; 


    document.body.appendChild(newdiv); 
    newdiv.innerHTML = copytext; 


    selection.selectAllChildren(newdiv); 


    window.setTimeout(function() { 
      document.body.removeChild(newdiv); 
    },0);
}

这是我的博客【猫十一の纸盒子】，欢迎学习交流