Custom Mode for Ace.js causes error "Uncaught TypeError: Cannot set property 'lastIndex' of undefined"

StackOverflow https://stackoverflow.com/questions/21071406

문제

I'm creating a web application that will require users to be able to write code in my custom scripting language that is currently in development. I've used Cloud9's Ace editor in projects before. Since I'm used to Ace and know quite a bit about how to implement it, I decided it'd be a perfect fit to fulfill my needs for my script editor. However, in order to use a custom scripting language, I needed to create a custom Mode for Ace to use. Here is my mode, which is stored in a file in the ace_editor directory (same directory as ace.js is in):

ace.define('ace/mode/customscript', function (require, exports, module) {

    var oop = require("ace/lib/oop");
    var TextMode = require("./text").Mode;
    var Tokenizer = require("ace/tokenizer").Tokenizer;
    this.HighlightRules = require("ace/mode/customscript_highlight_rules").CustomScriptHighlightRules;

    var Mode = function () {
        this.$tokenizer = new Tokenizer(new HighlightRules().getRules());
    };
    oop.inherits(Mode, TextMode);

    exports.Mode = Mode;
});

ace.define('ace/mode/customscript_highlight_rules', function (require, exports, module) {

    var oop = require("ace/lib/oop");
    var TextHighlightRules = require("./text_highlight_rules").TextHighlightRules;
    /*var keywords = [
        "null",
        "new",
        "task",
        "end",
        "if",
        "else",
        "elseif",
        "and",
        "or",
        "not",
        "then",
        "for",
        "loop",
        "while",
        "times",
        "print",
        "use",
        "use_csharp",
        "extend",
        "as",
        "return",
        "continue",
        "my"
    ];
    var keywordsRegex = "";
    for (var i = 0; i < keywords.length; i++) {
        keywordsRegex = keywordsRegex + keywords[i] + "|";
    }
    keywordsRegex = keywordsRegex.substr(0, keywordsRegex.length - 1);*/

    var CustomScriptHighlightRules = function () {

        this.createKeywordMapper({
            "variable.language": "this",
            "keyword":
                "new task end if else elseif and or not then for loop while times print use use_csharp extend as return continue my",
            "constant.language":
                "true false null"
        }, "text", true, " ");

        this.$rules = {
            "no_regex": [
                {
                    token: "comment",
                    regex: "(->)(.|[\r\n])*(<-)"
                },
                {
                    token: "comment",
                    regex: "--([^\n].*)"
                },
                {
                    token: "string",
                    regex: "(\"[^\"\\\\]*(?:\\\\.[^\"\\\\]*)*\")"
                },
                {
                    token: "numbers",
                    regex: "(\d)?[.]*(\d)*"
                },
                {
                    token: "booleans",
                    regex: "true|false"
                }
            ]
        };

    };

    oop.inherits(CustomScriptHighlightRules, TextHighlightRules);

    exports.CustomScriptHighlightRules = CustomScriptHighlightRules;
});

And here is the code I'm using to test the editor:

<!DOCTYPE html>
<html>
    <head>
        <title>CustomScript Editor</title>
    </head>
    <body>
        <div id="syntax_editor" style="width: 100%; height: 100%">task idk()
    alert("hi")
end</div>
        <script type="text/javascript">
            $().ready(function () {
                var editor = ace.edit("syntax_editor");
                editor.setTheme("ace/theme/twilight");
                editor.getSession().setMode("ace/mode/customscript");
                editor.getSession().setUseWrapMode(false);
                editor.getSession().setUseSoftTabs(true);
                editor.getSession().setTabSize(4);
                editor.setShowPrintMargin(false);
                editor.setFadeFoldWidgets(false);
                document.getElementById("syntax_editor").style.fontSize = 20 + 'px';
            });
        </script>
    </body>
</html>

The problem is that I'm getting an error from Ace when I load the page that reads:

Uncaught TypeError: cannot set property 'lastIndex' of undefined

I am using Ace's latest src_noconflict library from GitHub. What am I doing wrong in my custom mode?

도움이 되었습니까?

해결책

This is because "start" state is missing in your CustomScriptHighlightRules change 

    this.$rules = {
        "no_regex": [

to

    this.$rules = {
        "start": [
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top