Monaco 编辑器在 Angular 18 中的实现

Question

我想在 Angular 18 项目中使用 Monaco 编辑器在表单中嵌入自定义小代码片段，因为 Monaco 编辑器提供了编辑代码建议的功能。

实现 monaco-editor 包后，我无法运行编辑器。

我安装了 monaco-editor npm 包并将其集成到组件中，如下所示：

<div id="container" class="h-[50vh]"></div>

import { Component } from '@angular/core';
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';

@Component({
  selector: 'app-code-editor',
  templateUrl: './code-editor.component.html',
  styleUrl: './code-editor.component.scss',
})
export class CodeEditorComponent {
  ngAfterViewInit() {
    self.MonacoEnvironment = {
      getWorkerUrl: function (moduleId, label) {
        if (label === 'json') {
          return './vs/language/json/json.worker.js';
        }
        if (label === 'css' || label === 'scss' || label === 'less') {
          return './vs/language/css/css.worker.js';
        }
        if (label === 'html' || label === 'handlebars' || label === 'razor') {
          return './vs/language/html/html.worker.js';
        }
        if (label === 'typescript' || label === 'javascript') {
          return './vs/language/typescript/ts.worker.js';
        }
        return './vs/editor/editor.worker.js';
      },
    };

    const element = document.getElementById('container');
    if (element) {
      monaco.editor.create(element, {
        value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join(
          '\n',
        ),
        language: 'javascript',
      });
    }
  }
}

集成后，我可以看到编辑器窗口并输入代码，但 Monaco 功能均不可用。按 F1 执行命令不起作用，代码突出显示或建议也不起作用。

Answer 1

这可能是一个不错的选择。 @ng-util/摩纳哥编辑器