свертывание кода xml кода или расширение / сворачивание функциональности с помощью codeMirror - PullRequest
Новая
       4

свертывание кода xml кода или расширение / сворачивание функциональности с помощью codeMirror

1 голос
/ 29 ноября 2011

Как реализовать функцию свертывания кода XML или расширения / свертывания с помощью редактора JavaScript CodeMirror. Foldcode.js работает для файла JavaScript. Мне нужны те же функции для тегов XML.

Ответы [ 2 ]

2 голосов
/ 03 октября 2012

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);
0 голосов
/ 04 марта 2014

я сделал это:
чтобы использовать его для кода, например, измените '<' char на '{'. <br> код редактора 

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

обратите внимание, что char, который я ищу, '<', это означает, что он не работает идеально и может вызвать проблемы, если он появится в одной из строк xml </p>

...