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

Question

我正在尝试使用 here 中描述的纯 JS 方法将文本从 Ace 编辑器框内复制到我的本地剪贴板。然而，当我点击我的复制按钮时，它会抛出一个错误：

"TypeError: copyTextarea.select is not a function"

并且文本不会复制到我的剪贴板。有没有办法以某种方式做到这一点（纯 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>

P.S.：关于一些工人还有其他关于 Ace 的错误抛出，如果有人也知道如何解决这个问题，请在下面评论。提前致谢！

Answer 1

select 方法应该作为本地方法在 textarea 中可用，并且您在 [=28= 中使用它]（这是 ace 工作所需要的）。

从编辑器中检索值，将该值设置为 textarea，然后使用您的方法复制内容。

您可以使用 getValue 检索 Ace 的文本：

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

但是请注意，如果隐藏文本区域，您用来复制文本的方法将不起作用。

我建议您改用插件，read the following article to see possible solutions 纯 javascript 和 flash 后备（使用 js）。

Answer 2

在编辑器上调用 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>

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

Copy text from Αce editor to clipboard

javascript

jquery

ace-editor