更改ace-editor中为标记显示的文本

Question

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

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

并使用css类更改颜色：

.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+).+\$/
      }]
    };

但实际的文本将保持不变(从而导致文本选择/光标出现异常)，因此您需要填充/裁剪生成的value以使其与值的长度相匹配