更改在 ace-editor 中为令牌显示的文本

Question

我有这个 example 我通过正则表达式定位匹配的字符串并使用高亮规则更改样式。

this.$rules = {
  start: [{
    token: 'variableRef',
    regex: /$variable\..+$/
  }]
};

并使用 css class:

改变颜色

.ace_variableRef {
  color: red;
}

但我真正想做的是将显示的文本从 $variable.1.name$ 更改为 "resolved value"。我可以访问：

var variables = {
  1: 'timeout'
};

所以我可以使用参考路径来获取值，但是使用 ace-editor 甚至可以做到这一点吗？

理想情况下，我会以用户友好的方式显示字符串，但保留原始参考值（在元数据或其他内容中），因为这是实际存储在数据库中的内容。

Answer 1

您可以通过为您的规则定义自定义 onMatch 来完成此操作，就像这样

    this.$rules = {
      start: [{
        onMatch: function(value, state, stack) {
          var values = this.splitRegex.exec(value);
          return [{
            type: 'variableRef',
            value: variables[values[1]]
          }]
        },
        regex: /$variable\.(\d+).+$/
      }]
    };

但实际文本将保持不变（因此导致文本 selection/cursor 出现异常），因此您需要 pad/clip 结果 value 以匹配值的长度[0]

更改在 ace-editor 中为令牌显示的文本

Alter the text displayed for a token in ace-editor

ace-editor