个人中心
gpt4 book ai didi

javascript - 我不断收到 "CodeMirror.foldCode is not a function"。代码折叠插件不适用于自定义/简单模式吗？

转载 作者：行者123 更新时间：2023-12-02 22:51:36 34 4
gpt4 key购买 nike

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

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

我在这里进行了搜索，发现与我的问题无关的结果很少。我根据此处找到的一场势均力敌的比赛提供的解决方案仔细检查了我的工作。 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 不是函数

最佳答案

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

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

首先，“poefilter”应该是“indent”，因为这是我试图与foldcode插件一起应用的折叠类型的名称(通过indent-折叠.js)。

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

meta: {
    fold: "indent"
}

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

关于javascript - 我不断收到 "CodeMirror.foldCode is not a function"。代码折叠插件不适用于自定义/简单模式吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58159360/

34 4 0
文章推荐： javascript - 如何以三元+箭头表示法插入 "for"
文章推荐： graphics - 响度的配色方案？
文章推荐： objective-c - 在运行“通话”应用程序时播放音乐-iPhone
文章推荐： javascript - 如何使用 JavaScript 中的函数更改字符的值？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com