sql - ACE-editor - tillat tilpassede moduser og temaer i Angular/TypeScript

Introduksjon:

Jeg har en Angular-applikasjon hvor tilpassede SQL-setninger kan skrives ved å bruke ACE-editoren (https://ace.c9.io/). Selv om det finnes moduser og temaer for SQL, ønsket jeg å lage en tilpasset modus og et tilpasset tema for mine behov.

Oppsett:

Jeg fulgte denne veiledningen: https://blog.shhdharmen.me/how-to-setup-ace-editor-in-angular

  • ng new ace-app (Angular 13.3.2)
  • npm install ace-builds (ACE-Builds 1.4.14)
component.ts
import * as ace from 'ace-builds';

...

public aceEditor: ace.Ace.Editor;

@ViewChild('editor') private editor!: ElementRef<HTMLElement>;

...

  ngAfterViewInit(): void {
    // I don't understand why we don't set the "basePath" to our installed package
    ace.config.set('basePath', 'https://unpkg.com/[email /src-noconflict');

    this.aceEditor = ace.edit(this.editor.nativeElement);

    if (this.aceEditor) {
      this.aceEditor.setOptions({
        mode: 'ace/mode/sql',
        theme: 'ace/theme/sqlserver',
      });
    }

component.html
<div #editor></div>

Resultat:

Redigereren fungerer, men nå må jeg på en eller annen måte legge til en tilpasset modus og tema.

Problemer og spørsmål:

  • Er det riktig å sette basePath til en ekstern URL hvis jeg allerede har pakken installert (utdatert på grunn av Redigering 1)?
  • Hvordan og hvor ville jeg legge til den tilpassede mode.js og theme.js?
  • Hvordan kan jeg dirigere ace til custom mode.js og theme.js?

Rediger 1:

Jeg klarte å kvitte meg med denne kodelinjen:

ace.config.set('basePath', 'https://unpkg.com/[email /src-noconflict');

ved å importere temaet og modusen direkte med:

import 'ace-builds/src-noconflict/mode-sql';
import 'ace-builds/src-noconflict/theme-sqlserver';

Resten av koden måtte ikke endres.

Svar #1

Etter å ha sett gjennom flere prosjekter og problemer, fant jeg ut at den beste måten å implementere tilpassede temaer og moduser for ACE-editoren på er å kopiere eksisterende fra ./node-modules/ace-builds/src-conflict og lime dem inn i ./src/assets/ace.

Eksempel:

Kopier en eksisterende modus (og eventuelt temaet) som representerer din nødvendige syntaksutheving mest, i mitt tilfelle var det mode-sql.js. Jeg kopierte filene til ./src/assets/ace og endret importen i min component.ts fra:

import 'ace-builds/src-noconflict/mode-sql';
import 'ace-builds/src-noconflict/theme-sqlserver';

Til :

import '../../../../assets/ace/mode-sql.js';
import '../../../../assets/ace/theme-sqlserver.js';

Alt annet ble beholdt nøyaktig som beskrevet i det opprinnelige spørsmålet. Derfra kan du begynne å endre navnet på modus og tema, oppdatere reglene samt stilen i henhold til kravene dine.

Relaterte artikler