时间戳

首页 > 解决方案 > 王牌编辑器自定义模式 - 将突​​出显示规则添加到现有集合

ace-editor - 王牌编辑器自定义模式 - 将突​​出显示规则添加到现有集合

问题描述

我有一个与 GraalVM 脚本相关的 JavaScript 编辑器（Ace Editor），我在其中添加了一些自定义 JavaScript 规则。我希望它们使用自定义突出显示规则反映在编辑器中。但是，无论我尝试什么，似乎都无法添加新规则。我有一个正确包含的自定义模式，问题出在规则中。

我的起点看起来像这样（不包括模式代码）：

ace.define('ace/mode/custom_highlight_rules', ['require', 'exports', 'ace/lib/oop', 'ace/mode/text_highlight_rules'], (acequire, exports) => {
    const oop = acequire('ace/lib/oop');
    const JavaScriptHighlightRules = acequire("./javascript_highlight_rules").JavaScriptHighlightRules;

    const CustomHighlightRules = function CustomHighlightRules() {
        this.$rules = new JavaScriptHighlightRules().getRules();
    };

    oop.inherits(CustomHighlightRules, JavaScriptHighlightRules);

    exports.CustomHighlightRules = CustomHighlightRules;
});

现在，我尝试addRules()从文档中使用，如下所示：

this.addRules({
    start: [ {
        token: "keyword",
        regex: "my_keyword",
    } ]
}, 'custom-');

但是， my_keyword 未突出显示。

需要注意的是，将其替换为：

this.$rules = {
    start: [ {
        token: "keyword",
        regex: "my_keyword",
    } ]
};

突出显示这个关键字，但没有其他，因为没有其他规则——这就是我知道代码在做什么的方式。

我也尝试过这样的事情：

this.$rules.start.push({
    token: "keyword",
    regex: "my_keyword",
    next: "start",
});

这样规则就在内置start对象中，但它似乎不起作用。还尝试了正则表达式的变体（例如，使用本机正则表达式代码，如/my_keyword/）。

我注意到在使用时addRules()，我的自定义对象中没有processed: true，这表明我添加规则可能为时已晚？不过，这似乎是正确的地方。

我究竟做错了什么？

标签： ace-editor

解决方案

我没有详细说明为什么会这样，但看起来this.$rules需要在最后完成分配——所以首先需要构建对象，然后再分配。可以在此处找到有关如何执行此操作的工作示例： TypeScript 下的https://ace.c9.io/tool/mode_creator.html，它继承了 JavaScript，完全符合我的要求。

因此，我的函数现在看起来像这样：

const CustomHighlightRules = function CustomHighlightRules(options) {
    let customRules = [
        {
            token: "keyword",
            regex: "my_keyword"
        }
    ];

    let JSRules = new JavaScriptHighlightRules({jsx: (options && options.jsx)}).getRules();

    JSRules.no_regex = customRules.concat(JSRules.no_regex);
    this.$rules = JSRules;
}

推荐阅读