에이스 편집기에서 클립 보드로 텍스트 복사

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. : 에이스와 관련된 일부 직원 및 기타 등등에 대해 다른 오류가 발생했습니다. 문제를 해결하는 방법을 아는 사람이라면 아래에 댓글을 남기십시오. 미리 감사드립니다!

Answer 1

Select 메서드는 기본 방법과 텍스트 영역에서 사용할 수 있어야합니다, 당신은 (에이스가 작동하는 데 필요한 것입니다)를 사업부에서 그것을 사용하고 있습니다.

편집기에서 값을 가져오고 해당 값을 텍스트 영역으로 설정 한 다음 메서드를 사용하여 내용을 복사하십시오.

당신은 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> 

그러나 당신은 텍스트 영역을 숨길 경우 텍스트를 복사하는 데 사용하는 방법은 작동하지 않습니다.

순수한 자바 스크립트와 read the following article to see possible solutions 및 플래시 (js 사용)와 함께 대체 플러그인을 사용하는 것이 좋습니다. 에디터에

Answer 2

전화 focus 및 selectAll, 그것은 https://apidoc.c9.io/c9v3/# 좀보고 최신 브라우저

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