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

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

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

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

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

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

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

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

답변

2020 업데이트

모든 최신 브라우저 에서 작동하는 솔루션입니다 .

document.addEventListener('copy', (event) => {
  const pagelink = `\n\nRead more at: ${document.location.href}`;
  event.clipboardData.setData('text', document.getSelection() + pagelink);
  event.preventDefault();
});

Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
<textarea name="textarea" rows="7" cols="50" placeholder="paste your copied text here"></textarea>

스 니펫 확장

[이전 게시물-2020 년 업데이트 이전]

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

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에서만 사용할 수 있습니다.

브라우저 호환성 : IE> 4.
데모 : jsFiddle 데모 .
자바 스크립트 코드 :


    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);

답변

이것은 위의 수정 된 솔루션의 바닐라 자바 스크립트 솔루션이지만 더 많은 브라우저를 지원합니다 (크로스 브라우저 방법).

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);

답변

내가 테스트하고 작동하는 jQuery의 가장 짧은 버전은 다음과 같습니다.

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);
});

답변

다음은 jquery의 플러그인입니다.
https://github.com/niklasvh/jquery.plugin.clipboard
프로젝트 readme에서 “이 스크립트는 복사 이벤트가 호출되기 전에 선택 항목의 내용을 수정하여 복사 된 선택을 생성합니다. 사용자가 선택한 것과 다릅니다.

MIT 라이센스에 따라 출시 “

답변

답을 개선하고 변경 후 선택을 복원하여 복사 후 무작위 선택을 방지합니다.

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);

답변

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();
});

답변

또한 조금 더 짧은 솔루션 :

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;
} );