codemirror 3.0 형식 사전로드 된 텍스트 영역 코드

Question

CodeMirror를 사용하여 HTML5 기반 프리젠 테이션에서 편집기를 만듭니다. 가장 간단한 형식의 html은 다음과 같습니다.

<section class="pattern"> 
     <textarea id='pattern-view' class='codemirror' data-mode='javascript'> 
      var myModule = function(){ 
       //code goes here 
      } 
     </textarea> 
</section> 

및 문서의 아래

준비 나는 예상대로 이것은, 텍스트 영역 편집기로 대체 작동하는 코드

$(function(){ 
    var tAreas = document.querySelectorAll('.codemirror'); 
     for (var i = 0; i < tAreas.length; i++) { 
      CodeMirror.fromTextArea(tAreas[i], { theme: 'monokai', mode: tAreas[i].dataset.mode }); 
     } 
}); 

에게 있습니다. 문제는 들여 쓰기가 유지되고 올바르게 포맷되지 않았다는 것입니다. 코드 만 강조 표시하고 내용의 서식을 다시 지정하지 않습니다.

내가 여기에 추가해야 할 것이 있습니까? formatting.js addon에 대한 코드를 찾았습니다.이 코드는 더 이상 codemirror 3.0의 일부가 아닙니다.

텍스트 영역 내에 자동 포맷 코드가 있습니까?

Answer 1

내 질문에 답하십시오. 이것에 기회가 될 사람들을 위해. 이전 codemirror에서 formatting.js를 가져 와서 원하는 위치에 놓습니다. 이 준비를 귀하의 DOM 준비 기능에 추가하십시오.

var tAreas = document.querySelectorAll('.codemirror'); //assuming all textareas have the class codemirror 

     for (var i = 0; i < tAreas.length; i++) { 
      var editor = CodeMirror.fromTextArea(tAreas[i], {theme: 'monokai',mode: tAreas[i].dataset.mode, tabMode: 'indent' }); 
      CodeMirror.commands["selectAll"](editor); 
      autoFormatSelection(editor); 
      $(tAreas[i]).trigger({type: 'keypress', which: 13}); 
     } 

     function getSelectedRange(editor) { 
      return { from: editor.getCursor(true), to: editor.getCursor(false) }; 
     } 

     function autoFormatSelection(editor) { 
      var range = getSelectedRange(editor); 
      editor.autoFormatRange(range.from, range.to); 
      CodeMirror.commands['goPageUp'](editor); 

     }