codemirror 3.0格式預裝了textarea代碼

Question

我使用CodeMirror在基於HTML5的演示文稿中創建編輯器。它是最簡單的形式，html看起來像這樣。

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

和向下的文件準備好我的這個作品如預期，textarea的被替換爲編輯器的代碼

$(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插件的代碼，它不再是codemirror 3.0的一部分。

有沒有辦法自動格式化textarea內的代碼？

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

     }