Angelos Chalaris Angelos Chalaris - 3 months ago 17
jQuery Question

Copy text from Αce editor to clipboard

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

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

Comments