Copy the selected content of a TinyMCE Editor to the clipboard

Question

Jsfiddle example here:

My goal is to select all the content of the TinyMCE textarea and copy it to the clip board (the equivalent of highlighting it all and pressing ctrl+c).

I can do this with a normal input like so:

$('.copyToclip').on('click', function() {
    //select the input
    $(this).siblings('input').select();
    //fire the copy command
    document.execCommand("copy");
    $(this).text('copied');
});

The following code selects everything in the editor but when i call 'execCommand("copy")' it is not copied to the clip board, here is my code:

$('.copyTinyMCEToclip').on('click', function() {
    //select the content of the active tinyMCE instance 
    tinyMCE.activeEditor.selection.select(tinyMCE.activeEditor.getBody());
    document.execCommand("copy");
    $(this).text('copied');
});

Any help would be greatly appreciated.

Possible duplicate of [Javascript - Copy string to clipboard as text/html](https://stackoverflow.com/questions/34191780/javascript-copy-string-to-clipboard-as-text-html) — Heretic Monkey, Jul 03 '19 at 14:46

score 1 · Answer 1 · answered Jul 12 '19 at 23:06

1

The easiest solution to call the "copy" command via the tinyMCE API rather than the document object or JQuery.

tinyMCE.activeEditor.selection.select(tinyMCE.activeEditor.getBody());
tinyMCE.activeEditor.execCommand( "Copy" );

answered Jul 12 '19 at 23:06

fuzzy marmot

373
4
10

score 0 · Answer 2 · answered Jan 17 '17 at 13:40

0

Could you use tinyMCE methods, try this:

jQuery(function(){
    jQuery('.copyTinyMCEToclip').click(function(){
      var selectedText = tinyMCE.activeEditor.selection.getContent();
      jQuery('input').attr('value', selectedText);
    });
});

EXAMPLE: http://jsfiddle.net/w0ap9Lun/2/

REFERENCE: http://archive.tinymce.com/wiki.php/API3:method.tinymce.dom.Selection.getContent

answered Jan 17 '17 at 13:40

mariobros

859
4
12
31

Hello thanks for taking the time to answer my question. Unfortuneately I'm not trying to copy the content within the DOM, I'm moving it to the users clipboard so it can be pasted else where. I can 'get' the content, but i can't assign it to the clipboard. – Mr Giggles Jan 17 '17 at 14:17
sorry :) i've misunderstood! – mariobros Jan 17 '17 at 14:55

score 0 · Answer 3 · answered Jan 17 '17 at 13:52

Try this:

Function that copy text to clipboard:

function copyToClipboard(text) {
if (window.clipboardData && window.clipboardData.setData) {
    // IE specific code path to prevent textarea being shown while dialog is visible.
    return clipboardData.setData("Text", text); 

} else if (document.queryCommandSupported && document.queryCommandSupported("copy")) {
    var textarea = document.createElement("textarea");
    textarea.textContent = text;
    textarea.style.position = "fixed";  // Prevent scrolling to bottom of page in MS Edge.
    document.body.appendChild(textarea);
    textarea.select();
    try {
        return document.execCommand("copy");  // Security exception may be thrown by some browsers.
    } catch (ex) {
        console.warn("Copy to clipboard failed.", ex);
        return false;
    } finally {
        document.body.removeChild(textarea);
    }
}}

Assign value to control:

  $('.copyTinyMCEToclip').on('click', function() {
    var text = tinyMCE.activeEditor.getContent().replace(/<\/?[^>]+(>|$)/g, "")
    copyToClipboard(text);
    jQuery('input').attr('value', text);});

Thanks, this is really good and a step towards what I need. I've removed the regex as I want the markup to persist. The issue i have with this implementation is that I loose the clever formatting from TinyMCE. What I want to do it create a table with styling and paste it into an Email. With your solution I get the raw html, but then Outlook just renders the code, not the elements. — Mr Giggles, Jan 17 '17 at 14:36
I don't know if I understood well. You want copy to outlook code like that "
test
" and after that see "rendered table" ? — Mroczny Arturek, Jan 17 '17 at 17:56

score 0 · Accepted Answer · edited May 23 '17 at 12:33

0

I found the solution by refining my search query. The issue was more broadly adding HTML to the clipboard, which i found the answer here:

Javascript - Copy string to clipboard as text/html

edited May 23 '17 at 12:33

Community

1
1

answered Jan 17 '17 at 21:43

Mr Giggles

2,483
3
22
35

score 0 · Answer 5 · answered Sep 09 '18 at 20:31

0

Have jquery click the tinymce menu icons. Only downside is it leaves the editor with everything selected.

$(".mce-i-selectall").click();
$(".mce-i-copy").click();

answered Sep 09 '18 at 20:31

matiu

7,469
4
44
48

Copy the selected content of a TinyMCE Editor to the clipboard

5 Answers5