我不断收到 "CodeMirror.foldCode is not a function"。代码折叠插件是否不适用于 custom/simple 模式？

Question

我正在编写一个非常基础的网站来帮助我编辑流亡之路的 .filter 文件。我正在使用 CodeMirro 并编写了一个自定义模式来使用 mode/simple.js 插件处理语法突出显示。现在我正在尝试实现基于缩进的代码折叠。

我查看了 CodeMirror 站点上提供的示例和文档。 https://codemirror.net/doc/manual.html#overview

我在 SO 上进行了搜索，发现几乎没有与我的问题相关的结果。我已经根据此处找到的一场势均力敌的比赛提供的解决方案仔细检查了我的工作。 CodeMirror foldCode method not working

但我仍然遇到错误。我已经尝试研究该插件是否根本不适用于 custom/simple 模式，但互联网似乎严重缺乏有关 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>

以及我创建 CodeMirror 实例的 JavaScript：

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

Answer 1

好的，我终于解决了这个问题。

模式文件的最后一行，fold: "poefilter" 有一些问题。

首先，"poefilter" 应该是 "indent"，因为那是我试图用 foldcode 插件应用的折叠类型的名称（通过 indent-fold.js）。

其次，由于我使用的是简单模式，因此需要将选项包装在元属性中，如下所示：

meta: {
    fold: "indent"
}

一旦我解决了这两个问题，一切都会很顺利。

我不断收到 "CodeMirror.foldCode is not a function"。代码折叠插件是否不适用于 custom/simple 模式？

I keep getting "CodeMirror.foldCode is not a function". Does the code folding addon not work with custom/simple modes?

javascript

add-on

code-folding

codemirror