javascript copy rich text contents to clipboard
I need help copying rich text to the clipboard using JavaScript. i have searched around and haven't found anything to suit my specific need.
My JS
function ctrlA1(corp) {
with(corp) {
}
if (document.all) {
txt = corp.createTextRange()
txt.execCommand("Copy")
} else
setTimeout("window.status=''", 5000)
}
HTML
<div id="sc1">hello <br> <b> world </b> </div>
<button onclick="ctrlA1(document.getElementById('sc1') )"></button>
The above code isn't working and getting an object expected error. any help is appreciated. I have seen a library out there called zeroclipboard , but would prefer to write my own function.
EDIT i now have this function to select text on the page. is it possible to write a formula to copy the selected range as is?
function containerSelect(id) {
containerUnselect();
if(document.selection) {
var range = document.body.createTextRange();
range.moveToElementText(id);
range.select();
}
else if(window.getSelection) {
var range = document.createRange();
range.selectNode(id);
window.getSelection().addRange(range);
}
}
<label onclick="containerSelect(this); select_all()">
<p>hello world</p>
<img src="imagepath.png">
</label>
This tiny JS plugin copies richtext without using Flash : https://www.npmjs.com/package/clipboard-js
It's based on https://clipboardjs.com/ - but it's an upgrade in my opinion, because the original only supports plain text.
The code is simple:
clipboard.copy({
"text/html": "<i>Markup</i> <b>text</b>. Paste me into a rich text editor."
});
Well here is the deal most modern web browsers wont let you have access to the clip board. However like with everything there is a work around.
https://github.com/zeroclipboard/zeroclipboard
this is a js/flash plugin that lets you copy text to your clipboard.
(i believe you can use it for rich text.)
With modern browsers, if you want copy rich text only, there is a very easy solution without using any packages. See http://jsfiddle.net/jdhenckel/km7prgv4/3
Here is the source code from the fiddle
<button onclick="copyToClip(document.getElementById('foo').innerHTML)">
Copy the stuff
</button>
<div id=foo style="display:none">
This is some data that is not visible.
You can write some JS to generate this data.
It can contain rich stuff. <b> test </b> me <i> also </i>
<span style="font: 12px consolas; color: green;">Hello world</span>
You can use setData to put TWO COPIES into the same clipboard,
one that is plain and one that is rich.
That way your users can paste into either a
<ul>
<li>plain text editor</li>
<li>or into a rich text editor</li>
</ul>
</div>
the function
function copyToClip(str) {
function listener(e) {
e.clipboardData.setData("text/html", str);
e.clipboardData.setData("text/plain", str);
e.preventDefault();
}
document.addEventListener("copy", listener);
document.execCommand("copy");
document.removeEventListener("copy", listener);
};