Injecting text when content is copied from a web page
-
05-07-2019 - |
Question
I ran into a a site that injects a "Read More: " line at the end of any text that you highlight and copy from it's pages.
I've never seen this before, and without severely digging into their code, I can't find the code that does this.
Anyone know how this is done?
Example: http://peaceful-parenting.suite101.com/article.cfm/how_to_keep_kids_from_climbing_on
Copy a paragraph of text, and paste it into another application, and there will be a "read more" line afterwards.
Solution
Suite101 is using a 3rd party service called Tynt.
Tynt's JavaScript snippet is located at http://tcr.tynt.com/javascripts/Tracer.js
I explored the source for you (with some help from the Online JavaScript beautifier).
So here's what's happening:
- the code activates on events like mouseup, mousedown, and copy (in the
startListeningForTraces
function) - if the user selected a range of text, then it:
- creates the HTML for an attribution link, plus optional CC license URL
- appends this HTML to the selection, placing it inside a zero-size
<div>
(to keep it invisible on-screen) - reports what was copied back to Tynt's servers
Tynt's code does a tremendous amount of work to make this work seamlessly across browsers.
OTHER TIPS
Looks like it is tynt.com, which is some sort of tracer for text being copied off their page.
From the tynt.com site
Tracer automatically adds a link back to your site when content is copied and pasted. Read more: http://tracer.tynt.com/features-and-benefits-of-tracer#ixzz0MgaE6z6y Under Creative Commons License: Attribution No Derivatives
Heck... it just added the read more link and the CC license stuff to the text I copied from the tynt.com site.