如何在运行时使用Ace Code Editor添加新的突出显示规则？

Question

我正在尝试将自定义关键字注入到在编辑器上设置的任何模式。我尝试了以下方法：

rules = editor.session.getMode().$highlightRules
startRules = rules.$rules.start

startRules.push({
  regex: "\\w+"
  onMatch: rules.createKeywordMapper({customToken: "one|two"})
})

rules.addRules({start: startRules})

editor.session.bgTokenizer.start(0)

我要完成的工作是能够写出“ two”一词并将其包装在自定义标记周围

Answer 1

我迟到了几年，但我最近找到了一个可能对你和其他人有帮助的解决方案。查看我在他们的 Github 存储库（Ace Editor Repo）上打开的这个问题。使用此解决方案，您可以像我在运行时一样定义自己的令牌。在我的示例中，我制作了一个名为“my_token”的令牌。编辑器会将其包装在一个 div 中，该 div 的类名与您以“ace_”为前缀的令牌名称相匹配。所以像“ace_my_token”。

请注意，我的解决方案的一部分要求我以最高优先级突出显示我的新规则，因为我需要它以不同的方式突出显示，即使在字符串中也是如此，这就是我将它放在规则集中的原因。您可能需要根据您希望如何突出显示规则来调整插入规则的位置。

this.editor = ace.edit(this.editorId);
var session = this.editor.session;
this.language = this.language || 'text';
session.setMode('ace/mode/' + this.language, function() {
    var rules = session.$mode.$highlightRules.getRules();
    for (var stateName in rules) {
        if (Object.prototype.hasOwnProperty.call(rules, stateName)) {
            rules[stateName].unshift({
                token: 'my_token',
                regex: 'two'
            });
        }
    }
    // force recreation of tokenizer
    session.$mode.$tokenizer = null;
    session.bgTokenizer.setTokenizer(session.$mode.getTokenizer());
    // force re-highlight whole document
    session.bgTokenizer.start(0);
});

这是一个演示：https : //jsbin.com/yogeqewehu/edit? html,css,console, output