Question

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

为了使事情更清楚，我试图模仿我在Wordpress博客上使用footnotes plugin的行为，方法是编写一个基本相同的书签。

这是一个演示页面，您可以在其中粘贴带有类似维基的语法的文本，并将其解析为正确的脚注：

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，但如果没有 - 那些数据将是纯文本。

基本上你有两个选择：

覆盖浏览器在剪贴板中保存的内容（这样 - 无论内容将被粘贴到哪里 - 它将完全按您希望的方式显示）
劫持粘贴事件，从剪贴板中获取数据，按照您想要的方式进行更改，然后自行将其放入编辑器中。

＆＃13;

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

＆＃13;

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

＆＃13;

在上面的示例中，我提供了您可以使用的选项（原始复制/粘贴和特殊复制/粘贴）您可以看到在特殊副本的示例中 - 我构建了html字符串，以便从页面中的选择（基于DOM元素）放入剪贴板。通过这种方式，我可以获得href的确切值（不会将其更改为绝对路径）。

为方便起见，jsfiddle中的代码完全相同： https://jsfiddle.net/m0ad3uaa/

Answer 2

问题是客户端问题。浏览器使用绝对URL复制链接，这是为了防止将链接粘贴到不同区域时出现的问题。

例如，如果我点击http://site1.com上看起来像<a href="/myresource.jpg">的链接，我会被定向到http://site1.com/myresource.jpg。

现在，如果您要将同一标记复制到http://site2.com，则该链接现在将指向http://site2.com/myresource.jpg，该链接可能存在也可能不存在。

在大多数情况下这是有道理的，就好像您正在使用Chrome一样，您不太可能尝试复制网站，资源和所有内容。它还修复了<img>标记指向不存在的资产的问题。

但是，在所有这些说法中，可以通过编程方式弄乱所选内容。

基本上，您只想更改document.oncopy以取消window.getSelection()并删除您域名的所有实例，确保链接是相对的。

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

2 个答案: