크롬이 복사/붙여 넣기시 상대 링크를 절대 링크로 돌리지 않게하는 방법은 무엇입니까?

div의 서식있는 텍스트를 contenteditable="true"으로 복사하여 Medium 초안에 붙여 넣습니다. 대부분의 서식은 잘 보존되어 있지만 어떤 이유로 상대 링크가 모두 절대적으로 변환된다는 것을 이해하지 못합니다. 무슨 일이 일어날 지 모르겠다. 심지어 매체가 "붙여 넣기"이벤트를 청취 할 수 있다고 생각했습니다. 최악의 시나리오가 될 것입니다. 왜냐하면 그걸 통제 할 수 없기 때문입니다. 그렇다면 콘텐츠를 복사했을 때의 페이지 URL에 어떻게 액세스 할 수 있습니까? 실제로 다른 브라우저를 확인한 후에 Chrome의 잘못이라고 결론을 내 렸습니다. Safari에서는 완벽하게 작동하지만 Firefox에서는 전혀 작동하지 않습니다 (단, 다른 질문의 주제입니다 ...).크롬이 복사/붙여 넣기시 상대 링크를 절대 링크로 돌리지 않게하는 방법은 무엇입니까?

더 명확하게하려면 footnotes plugin의 동작을 모방하려고합니다. 본질적으로 동일한 북마크릿을 작성하여 Wordpress 블로그에 사용합니다. 사용의 두 모드에서

https://rawgit.com/arielpontes/footnoter/master/index.html

([1] 복사/붙여 넣기 : 인라인 참조를위한 위키와 같은 구문을 사용하여 텍스트를 붙여 적절한 각주로 구문 분석 할 수있는 다음

는 데모 페이지입니다 데모 페이지 또는 북마크릿을 사용하는 [2]), 결과 HTML에는 적절한 상대 링크가 있습니다. 그러나 Chrome의 매체에 다시 붙여 넣으면 절대 값은 rawgit.com을 가리키고 기능이 중단됩니다.

로컬 컴퓨터에서 rawgit.com 대신 코드를 실행하면 링크가 Chrome에도 붙여 넣어 진 후에 상대적인 양식으로 유지됩니다.

어떤 일이 벌어 질 수 있습니까? 그것을 고칠 방법이 있습니까?

출처

2016-07-29 Ariel

TL; DR - 붙여 넣은 내용에 대한 책임을 클립 보드에 넣 프로그램은 하나.

클립 보드에 뭔가를 복사 할 때마다 복사본이 여러 가지 데이터 유형을 넣을 수 있습니다 수행하는 응용 프로그램, 그래서 당신은 paste로 가장 적합한 하나를 사용할 수 있습니다 프로그램. 브라우저의 경우 - 웹 페이지의 콘텐츠를 선택하고 클립 보드에 복사 할 때 브라우저는 두 가지 유형 (html/plain 및 text/html)을 생성하므로 해당 내용을 html을 처리 할 수있는 프로그램에 붙여 넣으면 붙여 넣기는 html이지만 그렇지 않은 경우 데이터는 일반 텍스트입니다. (- 컨텐츠 붙여 넣을 위치에 상관없이 - 그것은 정확하게 당신이 원하는 방식 보일 것 이런 식으로)

재정의 브라우저가 클립 보드에 저장하는 내용 :

은 기본적으로 두 가지 옵션이 있습니다

붙여 넣기 이벤트를 하이재킹하고 클립 보드에서 데이터를 가져 와서 원하는 방식으로 변경 한 다음 직접 편집기에 넣습니다.

$('#text').on('paste', function(e) { 
 
    if ($('input[name=paste-type]:checked').val() == 'special') { 
 
    e.preventDefault(); 
 
    if (window.getSelection) { 
 
     sel = window.getSelection(); 
 
     if (sel.rangeCount) { 
 
     range = sel.getRangeAt(0); 
 
     range.deleteContents(); 
 
     node = document.createElement("p"); 
 
     text = 'Replacement text only for the paste' 
 
     node.appendChild(document.createTextNode(text)) 
 
     range.insertNode(node); 
 
     } 
 
    } 
 
    } 
 
}); 
 
$(document).on('copy', function(e) { 
 
    if ($('input[name=copy-type]:checked').val() == 'special') { 
 
    e.preventDefault(); 
 
    if (window.getSelection) { 
 
     sel = window.getSelection(); 
 
     if (sel.rangeCount) { 
 
     range = sel.getRangeAt(0); 
 
     nodes = range.cloneContents().childNodes 
 
     content = '' 
 
     contentPlain = '' 
 
     for (var i = 0; i < nodes.length; i++) { 
 
      node = nodes[i]; 
 
      contentPlain += node.textContent 
 
      if (node.nodeType == 3) { 
 
      content += node.textContent 
 
      } else if (node.nodeType == 1) { 
 
      content += node.outerHTML 
 
      } 
 
     } 
 
     } 
 
    } else { 
 
     content = '<span style="color: red; background: yellow;">Replacement text only for the copy</span>'; 
 
    } 
 
    e.originalEvent.clipboardData.setData('text/html', content); 
 
    e.originalEvent.clipboardData.setData('text/plain', contentPlain); 
 
    } 
 
}); 
 
$('#btn1').click(function() { 
 
    $('#ta1').val($('#text').html()); 
 
});

<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script> 
 
<div id="text" contenteditable="true" style="width: 400px; height :250px; border: 1px solid black;">Paste your text here...</div><br /> 
 
<textarea id="ta1" style="width: 400px; height: 150px; border: 1px solid green;" disabled="disabled"></textarea><br /> 
 
<button id="btn1">View HTML</button><br /> 
 
<label for="reg"><input type="radio" name="paste-type" value="regular" id="reg" checked="checked" /> Regular Paste</label> 
 
<label for="special"><input type="radio" name="paste-type" value="special" id="special" /> Force my paste</label> 
 
<br /><br /> 
 
<label for="copy-reg"><input type="radio" name="copy-type" value="regular" id="copy-reg" checked="checked" /> Regular Copy</label> 
 
<label for="copy-special"><input type="radio" name="copy-type" value="special" id="copy-special" /> Force my copy</label> 
 
<br /><br /> 
 
<div style="width: 400px; height: 300px; border: 1px solid red;"> 
 
    <p>Nonumes molestiae <b>scripserit mei eu. In sea singulis evertitur</b>, verear inimicus delicatissimi ad eam. Eu eros scripserit cum, nam ferri ludus saperet te, ex sea nostro prompta inciderint. Est at causae .</p> 
 
    <p>Quem feugait nam cu, sed <span style="background: red;">tantas meliore eu. Propriae efficiendi at</span> has, in usu nusquam noluisse, no nam natum verterem. Eu tation dignissim pro. Id eos wisi mollis commune</p> 
 
    <p>Ea has quando blandit <a href="#a1">intellegebat, iusto</a> fabulas eos in, per consul suscipit inciderint cu. Ea veri possim nostrud vis. Id civibi. Ut duo posse <a href="#a2">graecis voluptatibus</a>, mea eu errem possim quaestio.</p> 
 
</div>

난 당신이 (원본 복사/붙여 넣기 및 특수 복사/붙여 넣기) 놀 수있는 옵션을 준 위의 예에서

.
특수 복사의 예에서 - html 문자열을 내장하여 페이지의 선택 항목에서 클립 보드에 넣을 수 있습니다 (DOM 요소 기반). 이렇게하면 href의 정확한 값을 (절대 경로로 변경하지 않고) 얻을 수있었습니다. 당신의 편리를 들어

, jsfiddle에서 동일한 코드 : https://jsfiddle.net/m0ad3uaa/

출처

2016-08-03 03:17:30 Dekel

문제는 클라이언트 측이다. 브라우저는 링크를 절대 URL로 복사합니다. 링크를 다른 영역에 붙여 넣을 때 발생하는 문제를 방지하기위한 것입니다.

예를 들어 <a href="/myresource.jpg">과 같은 링크를 클릭하면 http://site1.com/myresource.jpg으로 연결됩니다.

이제 동일한 태그를 http://site2.com에 복사하면 링크가 http://site2.com/myresource.jpg을 가리키고, 존재하지 않을 수도 있습니다.

대부분의 경우 Chrome을 사용하는 것처럼 사이트, 저작물 및 모든 것을 복사하지 않으려 고합니다. 또한 <img> 태그가 존재하지 않는 자산을 가리키는 문제를 수정합니다.

그러나 모든 것을 말하면 선택되는 내용을 프로그래밍 방식으로 어지럽히는 것이 가능합니다.

기본적으로, 당신은 링크가 대신 상대하도록 보장 window.getSelection()을하고 도메인 이름의 모든 인스턴스를 제거 document.oncopy을 변경하려면 단지 것이다.

출처

2016-08-07 01:05:28 Joundill

귀하의 답변이이 질문에 이미 존재하지 않는 새로운 정보를 얼마나 정확하게 제공하는지 말할 수 있습니까? – Dekel

크롬이 복사/붙여 넣기시 상대 링크를 절대 링크로 돌리지 않게하는 방법은 무엇입니까?

답변

관련 문제