使用代碼鏡像摺疊或展開/摺疊功能的xml代碼代碼

Question

如何使用codeMirror javascript編輯器實現xml代碼摺疊或展開/摺疊功能。 Foldcode.js適用於JavaScript文件。我需要爲xml標籤提供相同的功能。

Answer 1

HTML：

<textarea id="CodeText</textarea> 

JAVASCRIPT ONREADY

var CollapseFunc = CodeMirror.newFoldFunction(CodeMirror.tagRangeFinder); 

    var editor = CodeMirror.fromTextArea($("#CodeText").get(0), { 
     mode: "text/html", 
     lineNumbers: true, 
     lineWrapping: true, 
     gutter : true, 
     onGutterClick: CollapseFunc, 
     extraKeys: { "Ctrl-Q": function (cm) { CollapseFunc(cm, cm.getCursor().line); } } 
    }); 
    CollapseFunc(editor, 1); 

Answer 2

我這樣做：
使用它的代碼，例如改變 '<' 字符爲 '{'。
編輯代碼包含

<script> 
var editor, original, changed, hilight = true; 
$(document).ready(function() { 

    function foldByLevel(cm, level) { 
     foldByNodeOrder(cm, 0); 
     // initialize vars 
     var cursor = cm.getCursor(); 
     cursor.ch = 0; 
     cursor.line = 0; 
     var range = cm.getViewport(); 
     foldByLevelRec(cm, cursor, range, level); 
    }; 

    function foldByLevelRec(cm, cursor, range, level) { 
     if (level > 0) { 
      var searcher = cm.getSearchCursor("<", cursor, false); 
      while (searcher.findNext() && searcher.pos.from.line < range.to) { 
       // unfold the tag 
       cm.foldCode(searcher.pos.from, null, "unfold"); 
       // move the cursor into the tag 
       cursor = searcher.pos.from; 
       cursor.ch = searcher.pos.from.ch + 1; 
       // find the closing tag 
       var match = CodeMirror.findMatchingTag(cm, cursor, range); 
       if (match) { 
        if (match.close) { 
         // create the inner-range and jump the searcher after the ending tag 
         var innerrange = { from: range.from, to: range.to }; 
         innerrange.from = cursor.line + 1; 
         innerrange.to = match.close.to.line; 
         // the recursive call 
         foldByLevelRec(cm, cursor, innerrange, level - 1); 
        } 
        // move to the next element in the same tag of this function scope 
        var nextcursor = { line: cursor.line, to: cursor.ch }; 
        if (match.close) { 
         nextcursor.line = match.close.to.line; 
        } 
        nextcursor.ch = 0; 
        nextcursor.line = nextcursor.line + 1; 
        searcher = cm.getSearchCursor("<", nextcursor, false); 
       } 
      } 
     } 
    } 

    function foldByNodeOrder(cm, node) { 
     // 0 - fold all 
     unfoldAll(cm); 
     node++; 
     for (var l = cm.firstLine() ; l <= cm.lastLine() ; ++l) 
      if (node == 0) 
       cm.foldCode({ line: l, ch: 0 }, null, "fold"); 
      else node--; 
    } 

    function unfoldAll(cm) { 
     for (var i = 0; i < cm.lineCount() ; i++) { 
      cm.foldCode({ line: i, ch: 0 }, null, "unfold"); 
     } 
    } 

    function initCodeMirror(text) { 
     var target = document.getElementById("view"); 
     target.innerHTML = ""; 
     editor = CodeMirror.MergeView(target, { 
      mode: "xml", 
      lineNumbers: true, 
      extraKeys: { 
       "Ctrl-J": "toMatchingTag", 
       "Ctrl-Q": function (cm) { cm.foldCode(cm.getCursor()); }, 
       "Ctrl-0": function (cm) { unfoldAll(cm); }, 
       "Alt-0": function (cm) { foldByLevel(cm, 0); }, 
       "Alt-1": function (cm) { foldByLevel(cm, 1); }, 
       "Alt-2": function (cm) { foldByLevel(cm, 2); }, 
       "Alt-3": function (cm) { foldByLevel(cm, 3); }, 
       "Alt-4": function (cm) { foldByLevel(cm, 4); }, 
       "Alt-5": function (cm) { foldByLevel(cm, 5); }, 
       "Alt-6": function (cm) { foldByLevel(cm, 6); }, 
       "Alt-7": function (cm) { foldByLevel(cm, 7); }, 
       "Alt-8": function (cm) { foldByLevel(cm, 8); }, 
       "Alt-9": function (cm) { foldByLevel(cm, 9); }, 
      }, 
      foldGutter: true, 
      matchTags: { bothTags: true }, 
      gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"], 
      value: text, 
      origLeft: null, 
      orig: text, 
      highlightDifferences: hilight 
     }); 
    } 
}); 
</script> 

腳本四：

<link href="@Url.Content("~/Content/CodeMirror/codemirror.css")" rel="stylesheet" /> 
<link href="@Url.Content("~/Content/CodeMirror/foldgutter.css")" rel="stylesheet" /> 
<link href="@Url.Content("~/Content/CodeMirror/show-hint.css")" rel="stylesheet" /> 
<link href="@Url.Content("~/Content/CodeMirror/merge.css")" rel="stylesheet" /> 

<script src="@Url.Content("~/Scripts/bootstrap.min.js")"></script> 
<script src="@Url.Content("~/Scripts/google.diff.match.patch.js")"></script> 
<script src="@Url.Content("~/Scripts/CodeMirror/codemirror.js")"></script> 
<script src="@Url.Content("~/Scripts/CodeMirror/foldcode.js")"></script> 
<script src="@Url.Content("~/Scripts/CodeMirror/foldgutter.js")"></script> 
<script src="@Url.Content("~/Scripts/CodeMirror/brace-fold.js")"></script> 
<script src="@Url.Content("~/Scripts/CodeMirror/xml-fold.js")"></script> 
<script src="@Url.Content("~/Scripts/CodeMirror/markdown-fold.js")"></script> 
<script src="@Url.Content("~/Scripts/CodeMirror/comment-fold.js")"></script> 
<script src="@Url.Content("~/Scripts/CodeMirror/show-hint.js")"></script> 
<script src="@Url.Content("~/Scripts/CodeMirror/xml-hint.js")"></script> 
<script src="@Url.Content("~/Scripts/CodeMirror/xml.js")"></script> 
<script src="@Url.Content("~/Scripts/CodeMirror/matchtags.js")"></script> 
<script src="@Url.Content("~/Scripts/CodeMirror/markdown.js")"></script> 
<script src="@Url.Content("~/Scripts/CodeMirror/searchwithoutdialog.js")"></script> 
<script src="@Url.Content("~/Scripts/CodeMirror/searchcursor.js")"></script> 
<script src="@Url.Content("~/Scripts/CodeMirror/merge.js")"></script> 

通知炭即時搜索「<」，這意味着它沒有完美的工作，並可能導致問題，這是否會出現在上xml的字符串