Jak powstrzymać przeglądarkę Chrome przed przekształcaniem względnych linków w linki bezwzględne podczas kopiowania/wklejania?

Question

Kopiuję tekst sformatowany z div za pomocą contenteditable="true" i wklejając go do wersji Medium. Większość formatowania zachowuje się dobrze, ale z jakiegoś powodu nie rozumiem, że wszystkie relatywne łącza są konwertowane na bezwzględne. Nie wiem, na jakim etapie tak się dzieje. Sądziłem nawet, że medium może słuchać wydarzeń "wklejanych". Byłby to najgorszy scenariusz, ponieważ miałbym nad nim niewielką kontrolę. Ale jeśli tak, to w jaki sposób mają oni dostęp do adresu URL strony, na której byłem, gdy kopiowałem treść? Rzeczywiście, po sprawdzeniu w innych przeglądarkach, doszedłem do wniosku, że to wina Chrome, a nie Medium. Na Safari działa idealnie, na Firefoksie to w ogóle nie działa (ale to temat na kolejne pytanie ...).

Próbuję wyjaśnić zachowanie footnotes plugin używam na moim blogu Wordpress, pisząc bookmarklet, który zasadniczo jest taki sam.

Oto strona demo gdzie można wkleić tekst ze składni wiki podobny do referencji inline i przetwarza je w odpowiednich przypisach:

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

w obu trybach użytkowania ([1] kopii/wklejanie na stronie demonstracyjnej lub [2] za pomocą skryptozakładki), wynikowy html ma odpowiednie relatywne linki. Jednak po wklejeniu z powrotem do medium w Chrome stają się one absolutne, wskazując na rawgit.com i łamiąc funkcjonalność.

Jeśli jednak uruchomię kod z mojej lokalnej maszyny zamiast rawgit.com, linki pozostaną we względnej formie po wklejeniu nawet w Chrome.

Co być może się dzieje? Czy jest jakiś sposób aby to naprawić?

Answer 1

TL; DR - Ten, który za wklejony do treści jest program, który umieszcza go w schowku.

Za każdym razem, że coś kopiujesz do schowka, aplikacja, która robi kopię można umieścić tam kilka danych typów, więc program, który paste się będzie w stanie wykorzystać ten, który działa najlepiej dla niego. W przypadku przeglądarki - po wybraniu zawartości strony i skopiowaniu do schowka - przeglądarka utworzy dwa typy (html/plain i text/html), więc jeśli wkleisz tę zawartość do programu, który poradzi sobie z html - dane, które otrzymasz wklej będzie html, ale jeśli nie - to dane będą czystym tekstem.

Zasadniczo masz dwie opcje:

1. przesłonić treści, które przeglądarka zapisuje w schowku (w ten sposób - bez względu na to, gdzie zawartość zostanie wklejona - to będzie wyglądać dokładnie tak, jak chcesz)
2. Przejęcie zdarzenia wklejania, pobranie danych ze schowka, zmiana go w żądany sposób i samodzielne umieszczenie w edytorze.

$('#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>

W powyższym przykładzie dałem opcje można grać z oryginalnym (kopiuj/wklej i szczególnego kopiuj/wklej).
Widać, że w przykładzie specjalnego-Copy - Zbudowałem ciąg html umieścić w schowku z wyboru na stronie (na podstawie DOM elementów). W ten sposób udało mi się uzyskać dokładną wartość href (bez zmiany jej na ścieżkę absolutną).

Na Twój wygodne, dokładnie ten sam kod w jsfiddle: https://jsfiddle.net/m0ad3uaa/

Answer 2

Problem jest po stronie klienta. Przeglądarki kopiują linki bezwzględnymi adresami URL, aby zapobiec powstawaniu problemów podczas wklejania odnośników do różnych obszarów.

Na przykład, jeśli kliknę link na http://site1.com, który wygląda jak ten <a href="/myresource.jpg">, zostanie przekierowany do http://site1.com/myresource.jpg.

Teraz, jeśli skopiowano ten sam znacznik do http://site2.com, odsyłacz wskazywałby teraz na http://site2.com/myresource.jpg, który może, ale nie musi istnieć.

to sens w większości przypadków, a jeśli używasz Chrome, jesteś mało prawdopodobne, aby być próbuje skopiować witrynę aktywa i wszystko. Rozwiązuje również problemy, w przypadku których znaczniki <img> wskazywałyby na zasoby, które nie istnieją.

Jednak, mówiąc to wszystko, można programowo zepsuć to, co jest wybierane.

Jest doskonałym przykładem tutaj: http://bavotasan.com/2010/add-a-copyright-notice-to-copied-text/

Zasadniczo, to po prostu chce zmienić document.oncopy wziąć window.getSelection() i usunąć wszystkie wystąpienia nazwy domeny, zapewniając, że linki są względne zamiast.