如何在Angular的Ace Editor中实现自定义关键词高亮？

尝试在Angular组件中通过Ace编辑器自定义高亮规则，将this.$rules中指定的keyword1、keyword2高亮，但未能得到预期效果，求排查代码遗漏部分。

用户提供的实现代码：

import {
 AfterViewInit,
 Component,
 ElementRef,
 OnInit,
 ViewChild,
} from '@angular/core';
import * as ace from 'ace-builds';

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit, AfterViewInit {
 @ViewChild('editor') private editor: ElementRef;

 constructor() {}

 ngAfterViewInit() {
   ace.config.set('fontSize', '14px');
   const editor = ace.edit(this.editor.nativeElement);
   const oop = ace.require('ace/lib/oop');
   const TextMode = ace.require('ace/mode/text').Mode;
   const TextHighlightRules = ace.require(
     'ace/mode/text_highlight_rules'
   ).TextHighlightRules;

   const customHighlightRules = function () {
     this.$rules = {
       start: [
         {
           regex: /\b(keyword1|keyword2)\b/,
           token: 'keyword',
         },
       ],
     };
   };

   oop.inherits(customHighlightRules, TextHighlightRules);

   const Mode = function () {
     this.HighlightRules = customHighlightRules;
   };

   oop.inherits(Mode, TextMode);

   (function () {
     this.$id = 'ace/mode/custom';
   }.call(Mode.prototype));

   // Set here
   editor.getSession().setMode(new (ace.require('ace/mode/custom').Mode)());
   
   editor.setValue('keyword1 some text keyword2', 1);
 }

 ngOnInit() {}
}

你的代码存在两个核心问题导致高亮失效：

• 自定义模式未注册到Ace模块系统
  你创建了自定义的Mode和HighlightRules，但没有通过Ace的define方法将其注册到模块系统中，执行ace.require('ace/mode/custom').Mode时会找不到对应模块，无法应用自定义规则。

• 模式设置方式错误
  未注册模块的情况下，手动实例化Mode会直接报错，即使模块注册成功，也不需要手动实例化，直接通过模式ID设置即可。

完整修复代码 #

import {
 AfterViewInit,
 Component,
 ElementRef,
 OnInit,
 ViewChild,
} from '@angular/core';
import * as ace from 'ace-builds';

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit, AfterViewInit {
 @ViewChild('editor') private editor: ElementRef;

 constructor() {}

 ngAfterViewInit() {
   ace.config.set('fontSize', '14px');
   const editor = ace.edit(this.editor.nativeElement);

   // 注册自定义高亮模式到Ace模块系统
   ace.define('ace/mode/custom', ['ace/lib/oop', 'ace/mode/text', 'ace/mode/text_highlight_rules'], 
     function(require, exports, module) {
       const oop = require('ace/lib/oop');
       const TextMode = require('ace/mode/text').Mode;
       const TextHighlightRules = require('ace/mode/text_highlight_rules').TextHighlightRules;

       const customHighlightRules = function () {
         this.$rules = {
           start: [
             {
               regex: /\b(keyword1|keyword2)\b/,
               token: 'keyword',
             },
           ],
         };
       };

       oop.inherits(customHighlightRules, TextHighlightRules);

       const Mode = function () {
         this.HighlightRules = customHighlightRules;
       };

       oop.inherits(Mode, TextMode);

       (function () {
         this.$id = 'ace/mode/custom';
       }.call(Mode.prototype));

       exports.Mode = Mode;
     }
   );

   // 通过模式ID应用自定义规则
   editor.getSession().setMode('ace/mode/custom');
   
   editor.setValue('keyword1 some text keyword2', 1);
 }

 ngOnInit() {}
}

补充说明 #

• Ace编辑器的自定义模式必须通过ace.define完成注册，否则模块加载器无法识别。
• token: 'keyword'会使用Ace内置的关键词高亮样式，如果需要自定义高亮外观，可以扩展token为token: ['keyword', 'custom-highlight']，然后在组件CSS中定义.custom-highlight的样式。

内容的提问来源于stack exchange，提问作者Learning