I'm working on a tool to speed up my work in the Canvas LMS. Canvas requires that you use inline styles for everything, and it uses TinyMCE as its WYSIWYG editor. My goal is to have a web page with a set of buttons that will copy pre-entered HTML snippets into the clipboard that I can then paste into the TinyMCE's rich content editor or also as plain-text into the HTML editor.
The following code works to get some formatted HTML content into the rich content editor, but it's stripping the style tags out when I paste it, and it isn't letting me paste the plain text into the HTML editor.
<div id="image-right">
<h2>Sample Header</h2>
<div style="padding: 0em; float: right; width: 300px; max-width: 40vw; margin-left: 1em; background-color: #coral; border-left: 1em solid #ffffff; border-bottom: 1em solid #ffffff;">
<figure style="margin: 0px; text-align: left;">
<br>
<figcaption style="padding: 1em;">
<strong>Figure 1.</strong> <em>Placeholder Text is a great way to visualize things.</em>
</figcaption>
</figure>
</div>
<p>Create your engaging copy here</p>
This is the javascript where I believe I'm falling short:
function CopyToClipboard(element) {
var doc = document
, text = doc.getElementById(element)
, range, selection;
if (doc.body.createTextRange)
{
range = doc.body.createTextRange();
range.moveToElementText(text);
range.select();
}
else if (window.getSelection)
{
selection = window.getSelection();
range = doc.createRange();
range.selectNodeContents(text);
selection.removeAllRanges();
selection.addRange(range);
}
document.execCommand('copy');
window.getSelection().removeAllRanges();
document.getElementById("btn").value="Copied";
}
Output after paste: (notice all the inline styles are stripped).
<h2>Sample Header</h2>
<div>
<figure><br />
<figcaption><strong>Figure 1.</strong><span> </span><em>Placeholder Text is a great way to visualize things.</em></figcaption>
</figure>
</div>
<p>Create your engaging copy here</p># test
I've read in a few answers that you can copy multiple data types from the inner div to the clipboard (text/HTML, text/plain), but I don't know how to implement that in a way that doesn't break. Even if I can't get both to copy, I at least need to keep the inline styles when I paste. Any help is much appreciated.
