1

我正在使用 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 插件的代码，它不再是codemirror 3.0 的一部分。

有没有办法自动格式化文本区域内的代码？

4

1 回答 1

2

回答我自己的问题。对于那些可能会碰巧的人。从旧代码镜像中获取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);

        }
于 2013-05-30T13:03:44.447 回答