如何在运行时使用Ace代码编辑器添加新的突出显示规则?

How do I add new highlight rules at runtime with Ace Code Editor?

本文关键字：显示 规则 添加 编辑器 运行时 代码 Ace      更新时间：2023-09-26

我正试图将自定义关键字注入编辑器上设置的任何模式。我尝试了以下操作:

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"中写入，并将其包裹在自定义标记

我迟到了几年，但我最近发现了一个解决方案，可能会帮助你和其他人。看看我在他们的Github repo (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

相关文章：