我不断收到“ CodeMirror.foldCode不是函数”。代码折叠加载项是否不适用于自定义/简单模式？

问题描述 投票：0回答：1

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

我已经阅读了CodeMirror网站上提供的示例和文档。https://codemirror.net/doc/manual.html#overview

我已经在SO上进行搜索，发现很少有与我的问题成切线相关的结果。我已根据此处找到的一场紧密匹配提供的解决方案对我的工作进行了仔细检查。CodeMirror foldCode method not working

但我仍然遇到错误。我已经尝试调查了该插件是否仅不适用于自定义/简单模式，但似乎互联网上严重缺乏有关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

javascript codemirror add-on code-folding
1个回答
0
投票

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

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

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

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

meta: {
    fold: "indent"
}

一旦我解决了这两个问题，一切都会很好地工作。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.