如何在不复制页面的情况下复制带有哈希链接（内联）的富文本url？

Question

我正在尝试从页面复制一些文本而不复制整个页面 url 用于内联 (#links)。

这是我的示例 fiddle：https://jsfiddle.net/adxhoz5v/10/

当您按下复制按钮时，它会复制整个 link 和剪贴板，当粘贴到另一个富文本编辑器时，看起来像这样：

<p>But it is a fascinating CSS trick and the web is a big place with an unknowable magnitude of situations where sometimes weird solutions are needed.</p>
<h3><a id="technique-1-directional-trickery" class="aal_anchor" href="https://fiddle.jshell.net/_display/?editor_console=true#technique-1-directional-trickery" aria-hidden="true"></a>Technique #1: Directional Trickery</h3>
<p>The trick here is to have the scrolling parent element use&nbsp;<code>direction: rtl</code>&nbsp;(or the opposite of whatever your primary direction is), and have the inside of the scrolling element switch back to whatever your normal is.</p>

注意它是如何用 jsfiddle 页面（第 url 页）的 url 复制内联 link:

href="https://fiddle.jshell.net/_display/?editor_console=true#technique-1-directional-trickery"

我的问题是，有没有一种方法可以防止这种默认行为，以便我的剪贴板中只剩下内联 links。像这样：

href="#technique-1-directional-trickery"

要复制，请使用您的桌面或任何在线富文本编辑器，例如：https://html-online.com/editor

Answer 1

问题是它总是会添加文档的baseURI用于富文本输出。由于此属性是自动填充的并且是只读的，因此无法避免这种情况。

幸运的是有一个解决方法。您可以利用 ClipboardEvent 接口获取 DIV 的数据 .outerHTML 属性而不是依赖 ClipboardJS 库。通过将复制文本的格式设置为 text/html.

来保留富文本

这是一个基于您的 fiddle 的示例：

function copyToClipboard(val) {
  function listener(e) {
    e.clipboardData.setData("text/html", val);
    e.preventDefault();
  }
  document.addEventListener("copy", listener);
  document.execCommand("copy");
  document.removeEventListener("copy", listener);
}

<div id="target">

  <p>But it is a fascinating CSS trick and the web is a big place with an unknowable magnitude of situations where sometimes weird solutions are needed.</p>
  <h3>
    <a id="technique-1-directional-trickery" class="aal_anchor" href="#technique-1-directional-trickery" aria-hidden="true"></a>Technique #1: Directional Trickery</h3>
  <p>The trick here is to have the scrolling parent element use&nbsp;<code>direction: rtl</code>&nbsp;(or the opposite of whatever your primary direction is), and have the inside of the scrolling element switch back to whatever your normal is.</p>
</div>

<button onclick="copyToClipboard(document.getElementById('target').outerHTML)">
   Copy to clipboard <svg xmlns="http://www.w3.org/2000/svg" height="20px" width="20px">
  <path d="M128 768h256v64H128v-64z m320-384H128v64h320v-64z m128 192V448L384 640l192 192V704h320V576H576z m-288-64H128v64h160v-64zM128 704h160v-64H128v64z m576 64h64v128c-1 18-7 33-19 45s-27 18-45 19H64c-35 0-64-29-64-64V192c0-35 29-64 64-64h192C256 57 313 0 384 0s128 57 128 128h192c35 0 64 29 64 64v320h-64V320H64v576h640V768zM128 256h512c0-35-29-64-64-64h-64c-35 0-64-29-64-64s-29-64-64-64-64 29-64 64-29 64-64 64h-64c-35 0-64 29-64 64z"/>
</svg>
</button>

如何在不复制页面的情况下复制带有哈希链接（内联）的富文本url？

How to copy rich text with hash links (inline) without copying the page url?

javascript

clipboard

clipboard.js