复制内容自动加入版权信息

发表于 | 更新于: 2020-03-02 | 分类于
字数统计: 777 | 阅读时长 ≈ 3 | 评论: | 阅读:

在自己的blog中实现复制文章内容加入版本信息时，在网上找了很多版本，结果在复制带html格式原代码的时候回出错。后来参考了一下csdn的代码自己写了一个版本

1. 查看CSDN中的复制代码

打开csdn的一片文章，右键查看网页源代码，搜索copyright.js

点击打开查看

!function() {
    function t() {
        this.textData = null,
        this.htmlData = null,
        a = this
    }
    function e(t) {
        if (window.getSelection().getRangeAt(0).toString().length > 140) {
            t.preventDefault();
            var e;
            e = window.getSelection() + a.textData;
            window.getSelection(),
            a.htmlData;
            if (t.clipboardData)
                t.clipboardData.setData("text/plain", e);
            else {
                if (window.clipboardData)
                    return window.clipboardData.setData("text", e);
                n(e)
            }
        }
    }
    function n(t) {
        var e = document.createElement("textarea");
        e.style.cssText = "position: fixed;z-index: -10;top: -50px;left: -50px;",
        e.innerHTML = t,
        document.getElementsByTagName("body")[0].appendChild(e),
        e.select(),
        document.execCommand("copy")
    }
    var a = null
      , i = function(t, e, n) {
        t.addEventListener ? t.addEventListener(e, n, !1) : t.attachEvent ? t.attachEvent("on" + e, n) : t["on" + e] = n
    };
    t.prototype.init = function(t, n, a) {
        this.textData = n,
        this.htmlData = a,
        i(t, "copy", e)
    }
    ,
    window.csdn = window.csdn ? window.csdn : {},
    csdn.copyright = new t
}();

2. 编写自己的代码

参考上面function e 和 n 完成自己的代码，编写一个自己的copyright.js文件

jQuery(document).on('copy', function(t) {
    var selected = window.getSelection();
    var selectedText = selected.toString();

    // 复制长度大于140字符串才会触发版权信息
    // 由于冒泡调用问题，oncopy会被调用二次，暂时没找到好的解决办法，临时存在家地址判断是否已经添加了
    if(selectedText.length>140 && selectedText.search(document.location.href) == -1){

        // 这里取网页中 <meta property="article:author" content="过客"> 作者的属性，可以根据自己网页取需要的
        var copyFooter = '\r\n————————————————\r\n'+
        '版权声明：本文为「'+$("meta[property='article:author']").attr("content")+'」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。\r\n'+
        '原文链接：' + document.location.href;

        if (t.clipboardData) {
            t.clipboardData.setData("text/plain", selected + copyFooter);
        } else {
            if (window.clipboardData) {
                return window.clipboardData.setData("text", selected + copyFooter);
            }
            (a = document.createElement("textarea")).style.cssText = "position: fixed;z-index: -100;top: -500px;left: -500px;",
            a.innerHTML = selected + copyFooter,
            document.getElementsByTagName('body')[0].appendChild(a),
            a.select(),
            setTimeout(function() {
                document.execCommand('copy');
            }, 0);
        }
    }
});

3. 使用

直接在自己的文章中引用copyright.js就可以了

<script type="text/javascript" src="//cdn.jsdelivr.net/gh/zngw/cdn/copyright.min.js"></script>

然后复制之后就会带版权信息了。效果如下

{% if page.comments && theme.gitalk.enable %}
  <link rel="stylesheet" href="//unpkg.com/gitalk/dist/gitalk.css"/>
  <script src="//unpkg.com/gitalk/dist/gitalk.min.js"></script>  
  <script type="text/javascript">  
    var gitalk = new Gitalk({
      clientID: '{{ theme.gitalk.ClientID }}',
      clientSecret: '{{ theme.gitalk.ClientSecret }}',
      repo: '{{ theme.gitalk.repo }}',
      owner: '{{ theme.gitalk.githubID }}',
      admin: ['{{ theme.gitalk.adminUser }}'],
      id: location.pathname,
      distractionFreeMode: '{{ theme.gitalk.distractionFreeMode }}'
    })
    gitalk.render('gitalk-container')           
  </script>
{% endif %}
————————————————
版权声明：本文为「过客」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://zengwu.com.cn/p/2fe3da.html#more
0%