Я продолжаю получать "CodeMirror.foldCode не является функцией". Аддон свертывания кода не работает в пользовательских / простых режимах? - PullRequest
Новая
       39

Я продолжаю получать "CodeMirror.foldCode не является функцией". Аддон свертывания кода не работает в пользовательских / простых режимах?

0 голосов
/ 30 сентября 2019

Я пишу очень простой веб-сайт, чтобы помочь мне редактировать файлы .filter для Path of Exile. Я использую CodeMirro и написал собственный режим для обработки подсветки синтаксиса с помощью дополнения mode / simple.js. Сейчас я пытаюсь реализовать свертывание кода на основе отступов.

Я просмотрел примеры и документацию, представленные на сайте CodeMirror. https://codemirror.net/doc/manual.html#overview

Я искал здесь на SO и нашел очень мало результатов, которые были даже косвенно связаны с моей проблемой. Я дважды проверил свою работу на основе решений, предоставленных одним близким совпадением, найденным здесь. Метод CodeMirror foldCode не работает

И все же я все еще получаю сообщение об ошибке. Я попытался выяснить, не работает ли аддон просто с пользовательскими / простыми режимами, но кажется, что Интернету не хватает как качества, так и количества информации о CodeMirror.

Любая помощь в решении этой проблемыбыть высоко ценится. Кроме того, если кто-нибудь знает, где я могу найти некоторые качественные учебники, которые были бы удивительными.

html: 

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name='viewport' content='width=device-width, initial-scale=1'>

  <title>Filter Editor</title>
  <meta name="description" content="HTML Editor for PoE Filters">
  <meta name="author" content="author">

  <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/styles.css">
  <link rel="stylesheet" href="codemirror/lib/codemirror.css">
  <link rel="stylesheet" href="codemirror/theme/twilight.css">
  <link rel="stylesheet" href="codemirror/addon/fold/foldgutter.css">

</head>

<body>
    <div id='app-container'>
        <div id='display-pane'>
            <div id='preview'>
                <div id='fog'></div>
                <div id='item'>Item Text</div>
            </div>
            <div id='settings'>
                <div id='item-text'>
                    <input id='item-text-input' type='text' placeholder='Item Text' value='Item Text'>
                </div>
                <h3>Sounds</h3>
                <div id='sound-examples'>
                    <div class='sound-row'>
                        <div class='sound'>1<audio src='audio/AlertSound1.mp3'></audio></div>
                        <div class='sound'>2<audio src='audio/AlertSound2.mp3'></audio></div>
                        <div class='sound'>3<audio src='audio/AlertSound3.mp3'></audio></div>
                        <div class='sound'>4<audio src='audio/AlertSound4.mp3'></audio></div>
                    </div>
                    <div class='sound-row'>
                        <div class='sound'>5<audio src='audio/AlertSound5.mp3'></audio></div>
                        <div class='sound'>6<audio src='audio/AlertSound6.mp3'></audio></div>
                        <div class='sound'>7<audio src='audio/AlertSound7.mp3'></audio></div>
                        <div class='sound'>8<audio src='audio/AlertSound8.mp3'></audio></div>
                    </div>
                    <div class='sound-row'>
                        <div class='sound'>9<audio src='audio/AlertSound9.mp3'></audio></div>
                        <div class='sound'>10<audio src='audio/AlertSound10.mp3'></audio></div>
                        <div class='sound'>11<audio src='audio/AlertSound11.mp3'></audio></div>
                        <div class='sound'>12<audio src='audio/AlertSound12.mp3'></audio></div>
                    </div>
                    <div class='sound-row'>
                        <div class='sound'>13<audio src='audio/AlertSound13.mp3'></audio></div>
                        <div class='sound'>14<audio src='audio/AlertSound14.mp3'></audio></div>
                        <div class='sound'>15<audio src='audio/AlertSound15.mp3'></audio></div>
                        <div class='sound'>16<audio src='audio/AlertSound16.mp3'></audio></div>
                    </div>
                </div>
                <h3>Icons</h3>
                <div id='icon-examples'>
                    <div id='icon-sizes'>
                        <h4>Sizes</h4>
                        <div>
                            <div class='icon icon-blue icon-circle'>0</div>
                            <div class='icon-medium icon-blue-med icon-circle-med'>1</div>
                            <div class='icon-small icon-blue-sm icon-circle-sm'>2</div>
                        </div>
                    </div>
                    <div id='icon-shapes'>
                        <h4>Shapes</h4>
                        <div>
                            <div><div class='icon-blue-sm icon-circle-sm icon-small'></div>Circle</div>
                            <div><div class='icon-blue-sm icon-square-sm icon-small'></div>Square</div>
                            <div><div class='icon-blue-sm icon-hexagon-sm icon-small'></div>Hexagon</div>
                            <div><div class='icon-blue-sm icon-triangle-sm icon-small'></div>Triangle</div>
                            <div><div class='icon-blue-sm icon-diamond-sm icon-small'></div>Diamond</div>
                            <div><div class='icon-blue-sm icon-star-sm icon-small'></div>Star</div>
                        </div>
                    </div>
                    <div id='icon-colors'>
                        <h4>Colors</h4>
                        <div>
                            <div><div class='icon-red-sm icon-square-sm icon-small'></div>Red</div>
                            <div><div class='icon-green-sm icon-square-sm icon-small'></div>Green</div>
                            <div><div class='icon-blue-sm icon-square-sm icon-small'></div>Blue</div>
                            <div><div class='icon-yellow-sm icon-square-sm icon-small'></div>Yellow</div>
                            <div><div class='icon-brown-sm icon-square-sm icon-small'></div>Brown</div>
                            <div><div class='icon-white-sm icon-square-sm icon-small'></div>White</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id='editor-pane'>
            <textarea id='code-mirror'></textarea>
        </div>
    </div>



    <script src="js/jquery.min.js"></script>
    <script src="codemirror/lib/codemirror.js"></script>
    <script src="codemirror/addon/fold/foldcode.js"></script>
    <script src="codemirror/addon/fold/foldgutter.js"></script>
    <script src="codemirror/addon/fold/indent-fold.js"></script>
    <script src="codemirror/addon/mode/simple.js"></script>
    <script src="codemirror/mode/filter/poefilter.js"></script>
    <script src="js/scripts.js"></script>

</body>
</html>

И JavaScript, где я создаю экземпляр CodeMirror: 

$(document).ready(function() {

    // CodeMirror Stuff
    var code = $("#code-mirror")[0];
    var editor = CodeMirror.fromTextArea(code, {
        mode: "poefilter",
        theme: "twilight",
        lineNumbers: true,
        lineWrapping: true,
        viewportMargin: 30,
        // saveFunction: "saveFunction",
        indentUnit: 4,
        minHeight: "100%",
        extraKeys: {"Ctrl-Q": function(cm){     CodeMirror.foldCode(cm.getCursor()); }},
        foldGutter: true,
        gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
    });

    editor.foldCode(CodeMirror.Pos(0, 0));
    editor.setSize("100%", "100%");

Вот режим, который я написал (poefilter.js): 

var test = {
        block: /(?:Show|Hide)/,
        condition: /(?:ItemLevel|DropLevel|Quality|Rarity|Class|Sockets|LinkedSockets|SocketGroup|Height|Width|AnyEnchantment|StackSize|GemLevel|Identified|Corrupted|ElderItem|ShaperItem|FracturedItem|SynthesisedItem|ShapedMap|BlightedMap|MapTier)/,
        opencond: /BaseType|Prophecy|HasExplicitMod|HasEnchantment|CustomAlertSound/,
        action: /(?:SetBorderColor|SetTextColor|SetBackgroundColor|SetFontSize|PlayAlertSoundPositional|PlayAlertSound|DisableDropSound|MinimapIcon|PlayEffect)/,
        operators: /(?:<|<=|=|>|>=)/,
        number: /[0-9]+/,
        literal: /(?:True|False|Normal|Magic|Rare|Unique|Temp|Red|Green|Blue|Yellow|Brown|White|Triangle|Square|Circle|Diamond|Hexagon|R|G|B)/,
        itemclass: /(?:"Life Flasks"|"Mana Flasks"|"Hybrid Flasks"|"Utility Flasks"|"Critical Utility Flasks"|Flasks|"Stackable Currency"|"Delve Stackable Socketable Currency"|"Socketable Currency"|Currency|Amulets|Rings|Claws|"Rune Dagger"|Daggers|Wands|"One Hand Swords"|"Thrusting One Hand Swords"|"Two Hand Swords"|Swords|"One Hand Axes"|"Two Hand Axes"|Axes|"One Hand Maces"|"Two Hand Maces"|Maces|Bows|Quivers|Staves|Warstaff|"Active Skill Gems"|"Support Skill Gems"|Gems|Belts|Gloves|Boots|"Body Armours"|Body|Helmets|Shields|"Quest Items"|Sceptres|Unarmed|"Fishing Rods"|"Map Fragments"|"Hideout Doodads"|Microtransactions|"Abyss Jewel"|Jewel|"Divination Card"|"Labyrinth Item"|"Labyrinth Trinket"|"Labyrinth Map Item"|Labyrinth|"Misc Map Items"|Leaguestones|"Pantheon Soul"|Piece|"Incursion Item"|Incubator|"Shard Heart"|Shard|Maps|Map)/,
        comment: /#.*/,
        custom: /.*/
    }

CodeMirror.defineSimpleMode("poefilter", {
    // The start state contains the rules that are intially used
    start: [
        // blocks
        {regex: test.comment, token: ["comment"]},
        {regex: test.block, token: "header"},
        {regex: test.condition, token: "attribute"},
        {regex: test.opencond, token: "attribute", next: "custom"},
        {regex: test.action, token: "def"},
        {regex: test.operators, token: "operator"},
        {regex: test.number, token: "number"},
        {regex: test.itemclass, token: "string-2"},
        {regex: test.literal, token: "number"}
    ],
    custom: [
        {regex: test.custom, token: "string", next: "start"}
    ],
    fold: "poefilter"
});

Я ожидаю увидеть маленькие стрелки в желобе, которые позволят мне щелкнуть по ним, чтобы открыть и закрыть код. Вместо этого я не вижу стрелок и получаю сообщение об ошибке в консоли разработчика: scripts.js:19 Uncaught TypeError: CodeMirror.foldcode is not a function

1 Ответ

1 голос
/ 01 октября 2019

Хорошо, я наконец решил эту проблему.

В последней строке файла режима fold: "poefilter" было несколько проблем.

Сначала "poefilter" должно было быть "indent"так как это имя типа сгиба, который я пытался применить с помощью аддона foldcode (через indent-fold.js).

Во-вторых, поскольку я использовал простой режим, этот параметр нужно было обернуть внутримета-свойство выглядит так: 

meta: {
    fold: "indent"
}

Как только я исправил эти две проблемы, все прекрасно работает.

...