如何阻止Chrome在复制/粘贴时将相对链接转换为绝对链接？

Question

我复制从富文本div用contenteditable="true"并将其粘贴到一个中等草案.大多数格式保存得很好,但由于某种原因,我不明白所有相关链接都转换为绝对链接.我不知道这发生了什么步骤.我甚至认为Medium可以听"粘贴"事件.这将是最糟糕的情况,因为我几乎无法控制它.但如果是这样,他们如何访问我复制内容时的页面网址？事实上,在与其他浏览器核实后,我认为这是Chrome的错,而不是中等.在Safari上它完美运行,在Firefox上根本不起作用(但这是另一个问题的话题......).

为了使事情更清楚,我试图通过编写一个基本相同的书签来模仿我在Wordpress博客上使用的脚注插件的行为.

这是一个演示页面,您可以使用类似wiki的语法粘贴文本以进行内联引用,并将它们解析为适当的脚注:

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

在两种使用模式中([1]复制/粘贴到演示页面或[2]使用书签),生成的html具有适当的相对链接.然而,在Chrome浏览器上重新回到Medium后,它们变得绝对,指向rawgit.com并破坏了功能.

但是,如果我从本地计算机上运行代码而不是rawgit.com,那么即使在Chrome上粘贴,链接也会保持相对形式.

可能会发生什么？有没有办法解决它？

Answer 1

TL;DR - 负责粘贴内容的程序是将其放入剪贴板的程序。

每次将某些内容复制到剪贴板时，执行复制的应用程序都可以在其中放置多种数据类型，因此您paste进入的程序将能够使用最适合它的数据类型。对于浏览器 - 当您选择网页内容并复制到剪贴板时 - 浏览器将创建两种类型（html/plain和text/html），因此如果您将该内容粘贴到可以处理 html 的程序中 - 您将粘贴的数据将是 html，但如果不是 - 该数据将是纯文本。

基本上你有两个选择：

1. 覆盖浏览器保存在剪贴板中的内容（这样 - 无论内容将粘贴到哪里 - 它看起来都会完全符合您想要的方式）
2. 劫持粘贴事件，从剪贴板获取数据，按照你想要的方式更改，然后自己将其放入编辑器中。

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