使用 codeMirror 的 xml 代码代码折叠或展开/折叠功能

Question

如何使用 codeMirror javascript 编辑器实现 xml 代码折叠或展开/折叠功能。 Foldcode.js 适用于 javascript 文件。我需要 xml 标签相同的功能。

Answer 1

HTML：

<textarea id="CodeText</textarea>

JAVASCRIPT 就绪

    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>

脚本 iv 包含的

<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 的字符串中，则可能会导致问题