如何将 monaco-editor 正确集成到 Angular 应用程序中?

问题描述 投票:0回答:3

摩纳哥编辑器集成有两种常见方式:

  1. 集成AMD版本
  2. 整合ESM版本

由于 angular-cli 在底层使用 webpack 似乎我应该使用 ESM 集成,但我发现的所有插件(摩纳哥的角度包装器)都使用 AMD 集成。同时,由于运行时错误,我无法集成 ESM 捆绑包。我很困惑。我应该使用哪一种方式来使用带有 angular-cli 应用程序(ng v13)的应用程序?两种方法的主要区别是什么?提前谢谢。

monaco-editor
3个回答
4
投票

我能够按照以下步骤将 ESM 版本与 Angular 15 一起使用:

注意:我使用 nx,但它应该与其他执行器一起使用,例如 Angular builder 注意:我今天实现了这个,并在啤酒之后立即发布了答案,记住可能有我没有涵盖的情况。

  1. 安装 monaco-editor-webpack-plugin
  2. 更改构建目标以使用支持修改 webpack 配置的执行器。如果是 nx 16,请使用“@nx/angular:webpack-browser”
  3. 添加 webpack.config.js

angular.json/project.json

{
  "build": {
    "executor": "@nx/angular:webpack-browser",
    "outputs": ["{options.outputPath}"],
    "options": {
      "customWebpackConfig": {
        "path": "path/to/webpack.config.js"
      },
      ...rest of the options
   }
}

webpack.config.js

const path = require('path');
const MONACO_DIR = path.resolve(process.cwd(), 'node_modules/monaco-editor');
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');

module.exports = {
  plugins: [new MonacoWebpackPlugin()],
  module: {
    rules: [
      {
        test: /\.ttf$/,
        include: MONACO_DIR,
        use: ['file-loader'],
      },
      {
        test: /\.css$/,
        include: MONACO_DIR,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

现在,您可以创建一个指令来实例化编辑器

@Directive({
  standalone: true,
  selector: '[codeEditor]',
})
export class EditorDirective {
  editor?: editor.IStandaloneCodeEditor;
  hostEl = inject(ElementRef).nativeElement;
  constructor() {
    import('monaco-editor/esm/vs/editor/editor.api').then(({ editor }) => {
      this.editor = editor.create(this.hostEl, {
        value: 'function hello() {\n\tconsole.log("Hello, world!");\n}',
        language: 'typescript',
        autoIndent: 'full',
        readOnly: true,
        domReadOnly: true,
      });
    });
  }
}
@Component({
  standalone: true,
  template: `<div codeEditor style="width: 100%; height: 100%"></div>`,
  styles: [`:host{display: block; width: 100%; height: 100%}`]
  imports: [EditorDirective],
})
export class YourComponent {}

0
投票

完成了 AMD,但仍然对 ESM 感到困惑和困惑。已创建存储库进行解释:https://github.com/alxpsr/ng-monaco-editor-integration


0
投票

我维护基于 AMD 的 Angular 包装器已经有一段时间了:https://github.com/ngstack/code-editor。您可以查看源代码,如果您觉得有用,也可以使用该组件。

对于ESM,集成到应用程序中仍然是一个复杂的过程。您可以在这里看到很多摩纳哥的示例:https://github.com/microsoft/monaco-editor/tree/main/samples。需要注意的是,您需要修改默认的 Angular 配置,并弄乱 webpack 设置(假设您使用的是 webpack 而不是其他捆绑器)。如果您想这样做,这篇文章可能会有所帮助:https://github.com/microsoft/monaco-editor/blob/main/docs/integrate-esm.md.

如果您是库作者,并且选择自定义 Webpack 配置路径,请记住,并非所有用户都希望篡改 Angular CLI 配置来使您的组件运行。即使 Monaco Playground 也是基于 AMD loader 和 React 组件,如果你检查它们的源代码:https://github.com/microsoft/monaco-editor/blob/main/website/src/monaco-loader.ts

© www.soinside.com 2019 - 2024. All rights reserved.