[英]How to copy rich text with hash links (inline) without copying the page url?
I am trying to copy some text from a page without copying the entire page url for the inline (#links).我正在尝试从页面复制一些文本而不复制整个页面 url 用于内联(#links)。
Here's my example fiddle: https://jsfiddle.net/adxhoz5v/10/这是我的小提琴示例: https://jsfiddle.net/adxhoz5v/10/
When you press the copy button, it copies the entire link and the clipboard, when pasted into another rich text editor, looks like this:当您按下复制按钮时,它会复制整个链接,而剪贴板在粘贴到另一个富文本编辑器时,如下所示:
<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 <code>direction: rtl</code> (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>
Notice how it copies the inline link with url of the jsfiddle page (page url):请注意它如何复制带有 jsfiddle 页面(页面 url)的 url 的内联链接:
href="https://fiddle.jshell.net/_display/?editor_console=true#technique-1-directional-trickery" href="https://fiddle.jshell.net/_display/?editor_console=true#technique-1-directional-trickery"
My question is, is there a way to prevent this default behaviour so that I am only left with the inline links in my clipboard.我的问题是,有没有办法阻止这种默认行为,这样我就只剩下剪贴板中的内联链接了。 Like so:像这样:
href="#technique-1-directional-trickery" href="#technique-1-directional-trickery"
To reproduce, please use your desktop or any online rich text editor like: https://html-online.com/editor要重现,请使用您的桌面或任何在线富文本编辑器,例如: https://html-online.com/editor
The problem is that it will always add the baseURI of the document for rich text output.问题是它总是会为富文本 output 添加文档的baseURI 。 Since this property is automatically populated and read-only there's no way to avoid this.由于此属性是自动填充的并且是只读的,因此无法避免这种情况。
Luckily there's a workaround though.幸运的是,有一个解决方法。 You can utilize theClipboardEvent interface to obtain the data of your DIVs .outerHTML
property instead of relying on the ClipboardJS library.您可以利用ClipboardEvent接口来获取您的 DIVs .outerHTML
属性的数据,而不是依赖 ClipboardJS 库。 Rich text is preserved by setting the format of the copied text to text/html
.通过将复制文本的格式设置为text/html
来保留富文本。
Here's an example based on your 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 <code>direction: rtl</code> (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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.