Copy text from Αce editor to clipboard

Question

I am trying to copy the text from inside an Ace Editor box into my local clipboard, using the pure JS method described here. However, when I click my copy button, it will throw me an error:

"TypeError: copyTextarea.select is not a function"

and the text will not copy to my clipboard. Is there a way to do this somehow (either pure JS or jQuery)? My code is as follows (simplified but should be enough):

$('#clipboard').on('click', function() {
  var copyTextarea = document.querySelector('#result-box');
  copyTextarea.select();
  document.execCommand('copy');
});

<button id="clipboard">Copy</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result-box" style="height: 100px; width: 100%; border-radius: 4px; border: 1px solid #DDD;">&lt;!DOCTYPE html&gt; 
  &lt;html&gt; 
  &lt;/html&gt;</div>
<script src="https://cdn.rawgit.com/ajaxorg/ace-builds/master/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
  var editor = ace.edit("result-box");
  editor.getSession().setMode("ace/mode/html");
  editor.setReadOnly(true);
  editor.setShowPrintMargin(false);
  editor.getSession().setUseWrapMode(true);
</script>

P.S.: There is another error thrown about some worker and whatnot concerning Ace, if anyone knows how to fix that, too, comment below. Thanks in advance!

Try to have a look at https://apidoc.c9.io/c9v3/#!/api/clipboard — GibboK, Aug 09 '16 at 10:23
@GibboK, nope, you can use that command without problems as long as the textarea is visible http://jsfiddle.net/ourcodeworld/wrL0j3xu/1/ — Carlos Delgado, Aug 09 '16 at 10:32

a user · Answer 1 · 2016-08-09T10:39:29.043

call focus and selectAll on the editor, it works on most of modern browsers

$('#clipboard').on('click', function() {
  var sel = editor.selection.toJSON(); // save selection
  editor.selectAll();
  editor.focus();
  document.execCommand('copy');
  editor.selection.fromJSON(sel); // restore selection
});

<button id="clipboard">Copy</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result-box" style="height: 100px; width: 100%; border-radius: 4px; border: 1px solid #DDD;">&lt;!DOCTYPE html&gt; 
  &lt;html&gt; 
  &lt;/html&gt;</div>
<script src="https://cdn.rawgit.com/ajaxorg/ace-builds/master/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
  var editor = ace.edit("result-box");
  editor.getSession().setMode("ace/mode/html");
  editor.setReadOnly(true);
  editor.setShowPrintMargin(false);
  editor.getSession().setUseWrapMode(true);
</script>

Yes, but how would I go about deselecting everything afterwards? I want it to look seamless and not show any of the inner workings to the user (I know this sounds a bit lame, but it is what I was asked to do). — Angelos Chalaris, Aug 09 '16 at 10:35

score 3 · Accepted Answer · answered Aug 09 '16 at 10:29

The select method should be available in the textarea as a native method, and you're using it in a div (which is what ace requires to work).

Retrieve the value from the editor, set that value to a textarea and then copy the content using your method.

You can retrieve the text of Ace using getValue :

<button id="clipboard">Copy</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result-box" style="height: 100px; width: 100%; border-radius: 4px; border: 1px solid #DDD;">&lt;!DOCTYPE html&gt; 
  &lt;html&gt; 
  &lt;/html&gt;</div>
<textarea id="clipboard-content"></textarea>
<script src="https://cdn.rawgit.com/ajaxorg/ace-builds/master/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
      var editor = ace.edit("result-box");
      editor.getSession().setMode("ace/mode/html");
      editor.setReadOnly(true);
      editor.setShowPrintMargin(false);
      editor.getSession().setUseWrapMode(true);

      $('#clipboard').on('click', function() {
          var copyTextarea = document.querySelector('#clipboard-content');
          copyTextarea.value = editor.getValue();
          copyTextarea.select();
          document.execCommand('copy');
          // Reset textarea
          copyTextarea.value = "";
      });
</script>

However note that the method that you're using to copy the text, will not work if you hide the textarea.

I recommend you to use a plugin instead, read the following article to see possible solutions with pure javascript and fallbacks with flash (using js).

Thank you very much, this works well enough for me. Adding the `textarea` dynamically and removing after copying did the trick without making the page look any different from before. — Angelos Chalaris, Aug 09 '16 at 10:33

Copy text from Αce editor to clipboard

2 Answers2