복사 된 웹 텍스트에 추가 정보를 추가하는 방법

복사 된 웹 텍스트에 추가 정보를 추가하는 방법

---

일부 웹 사이트는 이제 복사 된 콘텐츠에 텍스트를 추가 하는 Tynt 의 JavaScript 서비스를 사용합니다 .

이것을 사용하여 사이트에서 텍스트를 복사 한 다음 붙여 넣으면 텍스트 하단에 원본 콘텐츠에 대한 링크가 표시됩니다.

Tynt는 또한이를 추적합니다. 잘 된 깔끔한 트릭입니다.

이 작업을 수행하는 스크립트는 인상적입니다. 클립 보드 (이전 버전의 IE에서만 기본적으로 허용되고 항상 꺼져 있어야 함)를 조작하려고하기보다는 실제 선택을 조작합니다.

따라서 텍스트 블록을 선택하면 추가 콘텐츠가 <div>선택 항목에 포함 된 숨겨진 항목으로 추가됩니다 . 붙여 넣을 때 추가 스타일이 무시되고 추가 링크가 나타납니다.

이것은 실제로 간단한 텍스트 블록으로 수행하기 쉽지만 다른 브라우저에서 복잡한 HTML을 통해 가능한 모든 선택을 고려할 때 악몽입니다.

저는 웹 애플리케이션을 개발 중입니다. 누구도 복사 된 콘텐츠를 추적 할 수 없도록하고 추가 정보에 링크가 아닌 상황에 맞는 내용을 포함하고 싶습니다. 이 경우 Tynt의 서비스는 실제로 적절하지 않습니다.

유사한 기능을 제공하지만 내부 애플리케이션 데이터를 노출하지 않는 오픈 소스 JavaScript 라이브러리 (jQuery 플러그인 또는 유사)를 아는 사람이 있습니까?

---

복사 된 웹 텍스트에 추가 정보를 추가하는 두 가지 주요 방법이 있습니다.

1. 선택 조작

아이디어는를 감시 copy event한 다음 추가 정보와 함께 숨겨진 컨테이너를에 추가 dom하고 선택을 확장하는 것입니다.
이 방법은 c.bavota 에 의해이 기사 에서 채택 되었습니다 . 더 복잡한 경우 는 jitbit 의 버전 도 확인하십시오 .

• 브라우저 호환성 : 모든 주요 브라우저, IE> 8.
• 데모 : jsFiddle 데모 .
• 자바 스크립트 코드 :

    function addLink() {
        //Get the selected text and append the extra info
        var selection = window.getSelection(),
            pagelink = '<br /><br /> Read more at: ' + document.location.href,
            copytext = selection + pagelink,
            newdiv = document.createElement('div');

        //hide the newly created container
        newdiv.style.position = 'absolute';
        newdiv.style.left = '-99999px';

        //insert the container, fill it with the extended text, and define the new selection
        document.body.appendChild(newdiv);
        newdiv.innerHTML = copytext;
        selection.selectAllChildren(newdiv);

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

    document.addEventListener('copy', addLink);

2. 클립 보드 조작

아이디어는 copy event클립 보드 데이터 를보고 직접 수정하는 것입니다. 이것은 clipboardData속성을 사용하여 가능 합니다. 이 속성은의 모든 주요 브라우저에서 사용할 수 있습니다 read-only. 이 setData방법은 IE에서만 사용할 수 있습니다.

• Browser compatibility: IE > 4.
• Demo: jsFiddle demo.
• Javascript code:

    function addLink(event) {
        event.preventDefault();

        var pagelink = '\n\n Read more at: ' + document.location.href,
            copytext =  window.getSelection() + pagelink;

        if (window.clipboardData) {
            window.clipboardData.setData('Text', copytext);
        }
    }

    document.addEventListener('copy', addLink);

---

This is a vanilla javascript solution from a modified solution above but supports more browsers (cross browser method)

function addLink(e) {
    e.preventDefault();
    var pagelink = '\nRead more: ' + document.location.href,
    copytext =  window.getSelection() + pagelink;
    clipdata = e.clipboardData || window.clipboardData;
    if (clipdata) {
        clipdata.setData('Text', copytext);
    }
}
document.addEventListener('copy', addLink);

---

The shortest version for jQuery that I tested and is working is:

jQuery(document).on('copy', function(e)
{
  var sel = window.getSelection();
  var copyFooter = 
        "<br /><br /> Source: <a href='" + document.location.href + "'>" + document.location.href + "</a><br />© YourSite";
  var copyHolder = $('<div>', {html: sel+copyFooter, style: {position: 'absolute', left: '-99999px'}});
  $('body').append(copyHolder);
  sel.selectAllChildren( copyHolder[0] );
  window.setTimeout(function() {
      copyHolder.remove();
  },0);
});

---

Here is a plugin in jquery to do that https://github.com/niklasvh/jquery.plugin.clipboard From the project readme "This script modifies the contents of a selection prior to a copy event being called, resulting in the copied selection being different from what the user selected.

This allows you to append/prepend content to the selection, such as copyright information or other content.

Released under MIT License"

---

Improvement for 2018

document.addEventListener('copy', function (e) {
    var selection = window.getSelection();
    e.clipboardData.setData('text/plain', $('<div/>').html(selection + "").text() + "\n\n" + 'Source: ' + document.location.href);
    e.clipboardData.setData('text/html', selection + '<br /><br />Source: <a href="' + document.location.href + '">' + document.title + '</a>');
    e.preventDefault();
});

---

Improving on the answer, restore selection after the alterations to prevent random selections after copy.

function addLink() {
    //Get the selected text and append the extra info
    var selection = window.getSelection(),
        pagelink = '<br /><br /> Read more at: ' + document.location.href,
        copytext = selection + pagelink,
        newdiv = document.createElement('div');
    var range = selection.getRangeAt(0); // edited according to @Vokiel's comment

    //hide the newly created container
    newdiv.style.position = 'absolute';
    newdiv.style.left = '-99999px';

    //insert the container, fill it with the extended text, and define the new selection
    document.body.appendChild(newdiv);
    newdiv.innerHTML = copytext;
    selection.selectAllChildren(newdiv);

    window.setTimeout(function () {
        document.body.removeChild(newdiv);
        selection.removeAllRanges();
        selection.addRange(range);
    }, 100);
}

document.addEventListener('copy', addLink);

---

Also a little shorter solution:

jQuery( document ).ready( function( $ )
    {
    function addLink()
    {
    var sel = window.getSelection();
    var pagelink = "<br /><br /> Source: <a href='" + document.location.href + "'>" + document.location.href + "</a><br />© text is here";
    var div = $( '<div>', {style: {position: 'absolute', left: '-99999px'}, html: sel + pagelink} );
    $( 'body' ).append( div );
    sel.selectAllChildren( div[0] );
    div.remove();
    }



document.oncopy = addLink;
} );

---

It's a compilation of 2 answers above + compatibility with Microsoft Edge.

I've also added a restore of the original selection at the end, as it is expected by default in any browser.

function addCopyrightInfo() {
    //Get the selected text and append the extra info
    var selection, selectedNode, html;
    if (window.getSelection) {
        var selection = window.getSelection();
        if (selection.rangeCount) {
            selectedNode = selection.getRangeAt(0).startContainer.parentNode;
            var container = document.createElement("div");
            container.appendChild(selection.getRangeAt(0).cloneContents());
            html = container.innerHTML;
        }
    }
    else {
        console.debug("The text [selection] not found.")
        return;
    }

    // Save current selection to resore it back later.
    var range = selection.getRangeAt(0);

    if (!html)
        html = '' + selection;

    html += "<br/><br/><small><span>Source: </span><a target='_blank' title='" + document.title + "' href='" + document.location.href + "'>" + document.title + "</a></small><br/>";
    var newdiv = document.createElement('div');

    //hide the newly created container
    newdiv.style.position = 'absolute';
    newdiv.style.left = '-99999px';

    // Insert the container, fill it with the extended text, and define the new selection.
    selectedNode.appendChild(newdiv); // *For the Microsoft Edge browser so that the page wouldn't scroll to the bottom.

    newdiv.innerHTML = html;
    selection.selectAllChildren(newdiv);

    window.setTimeout(function () {
        selectedNode.removeChild(newdiv);
        selection.removeAllRanges();
        selection.addRange(range); // Restore original selection.
    }, 5); // Timeout is reduced to 10 msc for Microsoft Edge's sake so that it does not blink very noticeably.  
}

document.addEventListener('copy', addCopyrightInfo);

참고URL : https://stackoverflow.com/questions/2026335/how-to-add-extra-info-to-copied-web-text