如何向复制的Web文本添加额外信息 [英] How to add extra info to copied web text
问题描述
有些网站现在使用来自 Tynt 的JavaScript服务，该服务会将文字附加到复制的内容中。
Some websites now use a JavaScript service from Tynt that appends text to copied content.
如果您使用此网站复制文本然后粘贴，则会在文本底部获得指向原始内容的链接。
If you copy text from a site using this and then paste you get a link to the original content at the bottom of the text.
Tynt也会跟踪它。这是一个很好的技巧。
Tynt also tracks this as it happens. It's a neat trick well done.
他们这样做的脚本令人印象深刻 - 而不是试图操纵剪贴板（只有旧版本的IE允许它们默认执行）它应该总是被关闭）他们操纵实际选择。
Their script for doing this is impressive - rather than try to manipulate the clipboard (which only older versions of IE lets them do by default and which should always be turned off) they manipulate the actual selection.
所以当你选择一个文本块时，额外的内容被添加为隐藏的 < div> 包含在您的选择中。当您粘贴时，会忽略额外的样式并显示额外的链接。
So when you select a block of text the extra content is added as a hidden <div> included in your selection. When you paste the extra style is ignored and the extra link appears.
这对于简单的文本块实际上相当容易，但是当你考虑所有的时候这是一场噩梦可以在不同浏览器的复杂HTML中进行选择。
This is actually fairly easy to do with simple blocks of text, but a nightmare when you consider all the selections possible across complex HTML in different browsers.
我正在开发一个Web应用程序 - 我不希望任何人能够跟踪复制的内容，我希望包含某些上下文的额外信息，而不仅仅是一个链接。在这种情况下，Tynt的服务并不合适。
I'm developing a web application - I don't want anyone to be able to track the content copied and I would like the extra info to contain something contextual, rather than just a link. Tynt's service isn't really appropriate in this case.
有没有人知道提供类似功能的开源JavaScript库（可能是jQuery插件或类似）不暴露内部应用程序数据？
Does anyone know of an open source JavaScript library (maybe a jQuery plug in or similar) that provides similar functionality but that doesn't expose internal application data?
推荐答案
有两种主要方法可以为复制的网络文本添加额外信息。
There are two main ways to add extra info to copied web text.
想法是观察复制事件，然后使用我们的额外信息追加隐藏容器到 dom ，并将选择范围扩展到它。
此方法改编自 c.bavota / add-a-copyright-notice-notice-text />本文。另请参阅 jitbit 的版本更复杂的案例。
The idea is to watch for the copy event, then append a hidden container with our extra info to the dom, and extend the selection to it.
This method is adapted from this article by c.bavota. Check also jitbit's version for more complex case.
- 浏览器兼容性：所有主流浏览器，IE> 8. / li>
- 演示： jsFiddle演示。
- Javascript代码：
- Browser compatibility: All major browsers, IE > 8.
- Demo: jsFiddle demo.
- Javascript code:
function addLink() {
//Get the selected text and append the extra info
var selection = window.getSelection(),
pagelink = '<br /><br /> Read more at: ' + document.location.href,
copytext = selection + pagelink,
newdiv = document.createElement('div');
//hide the newly created container
newdiv.style.position = 'absolute';
newdiv.style.left = '-99999px';
//insert the container, fill it with the extended text, and define the new selection
document.body.appendChild(newdiv);
newdiv.innerHTML = copytext;
selection.selectAllChildren(newdiv);
window.setTimeout(function () {
document.body.removeChild(newdiv);
}, 100);
}
document.addEventListener('copy', addLink);
2。操作剪贴板
想法是观察复制事件并直接修改剪贴板数据。这可以使用 clipboardData 属性。请注意，此属性在只读中的所有主流浏览器中均可用; setData 方法仅适用于IE。
2. Manipulating the clipboard
The idea is to watch the copy event and directly modify the clipboard data. This is possible using the clipboardData property. Note that this property is available in all major browsers in read-only; the setData method is only available on IE.
- 浏览器兼容性：IE> 4.
- 演示： jsFiddle demo 。
- Javascript代码：
- Browser compatibility: IE > 4.
- Demo: jsFiddle demo.
- Javascript code:
function addLink(event) {
event.preventDefault();
var pagelink = '\n\n Read more at: ' + document.location.href,
copytext = window.getSelection() + pagelink;
if (window.clipboardData) {
window.clipboardData.setData('Text', copytext);
}
}
document.addEventListener('copy', addLink);
这篇关于如何向复制的Web文本添加额外信息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
