Как добавить правила подсветки ACE Editor в угловое приложение? - PullRequest
Новая
       32

Как добавить правила подсветки ACE Editor в угловое приложение?

0 голосов
/ 12 июня 2019

Я пытаюсь добавить пользовательские правила подсветки. Мой пример основан на этом и этом . 

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';

import * as ace from 'ace-builds';

import 'ace-builds/src-noconflict/mode-javascript';
import 'ace-builds/src-noconflict/theme-github';
import 'ace-builds/src-noconflict/ext-language_tools';

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

  constructor() { }

  ngOnInit() {
    var oop = ace.require('ace/lib/oop');
    var textHighlightRules = ace.require('ace/mode/text_highlight_rules').TextHighlightRules;

    const $rules = {
      start: [
        {
          regex: /sometext/,
          token: "keyword"
        },
        {
          regex: /othertext/,
          token: "keyword"
        }
      ]
    };

    const customHighlightRules = function CustomHighlightRules() {
      this.$rules = $rules;
    };

    oop.inherits(customHighlightRules, textHighlightRules);

    //exports.MyNewHighlightRules = customHighlightRules; //??
    const element = this.codeEditorElmRef.nativeElement;

    const options = {
      minLines: 14,
      maxLines: Infinity,
      highlightSelectedWord: true,
      enableBasicAutocompletion: true,
      enableSnippets: true,
      enableLiveAutocompletion: true
    };

    this.codeEditor = ace.edit(element, options);
    this.codeEditor.setTheme('ace/theme/github');
    this.codeEditor.getSession().setMode('ace/mode/text');
    this.codeEditor.setShowFoldWidgets(true);
  }
}

Мне нужно, чтобы "sometext" был выделен. Как адаптировать этот пример к угловому и машинописному тексту? Я не смог найти ни одного рабочего примера, где используется интеграция с angular.

1 Ответ

1 голос
/ 13 июня 2019

Вам нужно создать и Mode, и HighlightRules следующим образом: 

var oop = ace.require("ace/lib/oop");
var TextMode = ace.require("ace/mode/text").Mode;
var TextHighlightRules = ace.require("ace/mode/text_highlight_rules").TextHighlightRules;

var CustomHighlightRules = function(){
    this.$rules = {
        'start': [
            {
              regex: /\b(sometext|othertext)\b/,
              token: "keyword"
            }
        ]
    };
};

oop.inherits(CustomHighlightRules, TextHighlightRules);

var Mode = function() {
    this.HighlightRules = CustomHighlightRules;
};
oop.inherits(Mode,TextMode);

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


element = document.body
this.codeEditor = ace.edit(element, {
    value: "sometext not othertext",
    minLines: 14,
    maxLines: Infinity,
    highlightSelectedWord: true,
    enableBasicAutocompletion: true,
    enableSnippets: true,
    enableLiveAutocompletion: true,
    theme: 'ace/theme/github',
    showFoldWidgets: true,
    mode: new Mode
});
...