ACE 编辑器 - 在 Angular/TypeScript 中允许自定义模式和主题

Question

简介：

我有一个 Angular 应用程序，其中可以使用 ACE 编辑器 (https://ace.c9.io/) 编写自定义 SQL 语句。尽管有 SQL 的模式和主题，但我想根据我的要求创建自定义模式和自定义主题。

设置：

我遵循了这个教程：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/ace-builds@1.4.12/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>

结果：

编辑器工作正常，但现在我需要以某种方式添加自定义模式和主题。

问题与疑问：

如果我已经安装了软件包（由于编辑 1 已过时），将 basePath 设置为外部 URL 是否正确？
如何以及在何处添加自定义 mode.js 和 theme.js？
如何将 ace 指向自定义 mode.js 和 theme.js？

编辑 1：

我设法摆脱了这行代码：

ace.config.set('basePath', 'https://unpkg.com/ace-builds@1.4.12/src-noconflict');

通过直接导入主题和模式：

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

其余代码无需更改。

Answer 1

在查看了几个项目和问题后，我发现为 ACE 编辑器实现自定义主题和模式的最佳方法是从 ./node-modules/ace-builds/src-conflict 复制现有主题和模式并将它们粘贴到 ./src/assets/ace .

示例：

复制一个现有的模式（和可选的主题），它代表您所需的语法最突出，在我的例子中是 mode-sql.js。我将文件复制到 ./src/assets/ace 并将我的 component.ts 中的导入更改为：

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

收件人：

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

其他一切都完全按照最初问题中的描述进行。从那里您可以开始更改模式和主题的名称，根据您的要求更新规则和样式。

ACE 编辑器 - 在 Angular/TypeScript 中允许自定义模式和主题

ACE editor - allow custom modes and themes in Angular/TypeScript

sql

ace-editor

typescript

angular