将文本从Αce编辑器复制到剪贴板

Question

我正在尝试使用此处描述的纯JS方法将Ace编辑器框内的文本复制到我的本地剪贴板中.但是,当我单击我的复制按钮时,它会给我一个错误:

"TypeError:copyTextarea.select不是函数"

并且文本不会复制到我的剪贴板.有没有办法以某种方式(纯JS或jQuery)？我的代码如下(简化但应该足够):

$('#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>

PS:关于一些工人还有另外一个错误,如果有人知道如何解决这个问题,请注意以下内容.提前致谢!

Answer 1

调用focus和selectAll编辑器,它适用于大多数现代浏览器

$('#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>