复制文章携带版权信息

20 篇文章 0 订阅
10 篇文章 0 订阅

复制文章内容 携带版权信息

注意事项: 如果使用的是 nuxt.js写的项目 调用可以能会报 addEventListener is not undefined

使用 if (process.client) {} 包裹住  

1. methods中写复制文章内容携带版权信息的方法:

setClipboardText(event) {
      event.preventDefault(); //阻止元素发生默认的行为(例如,当点击提交按钮时阻止对表单的提交)。
      var node = document.createElement("div");
      //对documentfragment不熟,不知道怎么获取里面的内容,用了一个比较笨的方式
      node.appendChild(
        window
          .getSelection()
          .getRangeAt(0)
          .cloneContents()
      );
      //getRangeAt(0)返回对基于零的数字索引与传递参数匹配的选择对象中的范围的引用。对于连续选择,参数应为零。
      // 本文地址
      let articleUrl = window.location.href;
      // 网站地址
      let websiteUrl = window.location.origin;
      var htmlData = "<div>" + node.innerHTML;
      +"著作权归作者所有。<br />" +
        "商业转载请联系作者获得授权,非商业转载请注明出处。<br />" +
        "作者:" +
        this.author +
        "<br />链接:" +
        articleUrl +
        "<br />" +
        "来源:" +
        websiteUrl +
        "<br /><br />" +
        "</div>";
      var textData =
        window.getSelection().getRangeAt(0) +
        "\n" +
        "\n" +
        "---------------------------" +
        "\n" +
        "\n" +
        "著作权归作者所有。\n" +
        "商业转载请联系作者获得授权,非商业转载请注明出处。\n" +
        "作者:" +
        this.author +
        "\n链接:" +
        articleUrl +
        "\n" +
        "来源:" +
        websiteUrl +
        "\n\n";
      if (event.clipboardData) {
        event.clipboardData.setData("text/html", htmlData);
        //setData(剪贴板格式, 数据) 给剪贴板赋予指定格式的数据。返回 true 表示操作成功。
        event.clipboardData.setData("text/plain", textData);
      } else if (window.clipboardData) {
        //window.clipboardData的作用是在页面上将需要的东西复制到剪贴板上,提供了对于预定义的剪贴板格式的访问,以便在编辑操作中使用。
        return window.clipboardData.setData("text", textData);
      }
    },

2.在mounted中使用addEventListener创建copy事件

 if (process.client) {
      window.onload = () => {
        var answer = document.getElementById("articleDetails");
        answer.addEventListener("copy", e => {
          this.setClipboardText(e);
        });
      };
    }

3.在 destroyed 中销毁事件这个事件

原生DOM事件必须要手动销毁,否则会造成内存泄漏

window.removeEventListener('copy',this.setClipboardText()) 

📢没了,结束了,如有错误,欢迎留言.如有问题,不吝赐教。
📢如果此篇博文对您有帮助,还请动动小手点赞 👍 收藏 ⭐留言 📝呐~,谢谢 ~ ~

  • 4
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值