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

这按预期工作，textarea被编辑器替换。问题是缩进是否保持且格式不正确。它只突出显示代码，不重新格式化内容。

我需要添加一些内容吗？我确实找到了format.js addon的代码，它不再是codemirror 3.0的一部分。

有没有什么可以自动格式化textarea中的代码？

Answer 1

回答我自己的问题。对于那些可能有机会的人。从旧的codemirror获取formatting.js并将其放在您喜欢的位置。将此添加到您的dom ready函数

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

        }

codemirror 3.0格式预加载textarea代码

1 个答案: