Question

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

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

并使用CSS类更改颜色：

.ace_variableRef {
  color: red;
}

但是我真正想做的是将显示的文本从$ variable.1.name $更改为“解析值”。我可以访问：

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以使其与值的长度[0]相匹配

在ace编辑器中更改为令牌显示的文本

1 个答案: