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!

Answer 1

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).