无法在 Angular cli 18 中加载grapesjs-blocks-basic

Question

请注意，我们正在使用最新的 Angular 和 NodeJS 版本，我们希望包含 GrapesJS 基本块，并按照 https://github.com/GrapesJS/blocks-basic

中提到的步骤进行操作

安装

npm i grapesjs-blocks-basic

后，我在node_modules文件夹中看不到

grapesjs-blocks-basic.min.js

如果我尝试使用

import grapesjs-blocks-basic

，它也不起作用。我也尝试使用脚本“

node_modules/grapesjs-blocks-basic/dist/index.js

”，它也没有加载控件。

您能建议一下，需要进行哪些修改吗？提前感谢您的帮助。谢谢。

Angular CLI: 18.2.11
Node: 22.9.0

Answer 1

首先安装软件包：

npm i grapesjs-blocks-basic
npm i grapesjs

然后我们可以在

styles

文件中添加葡萄的

scripts

和

angular.json

：

      "options": {
        "assets": [],
        "index": "src/index.html",
        "browser": "src/main.ts",
        "outputPath": "dist/demo",
        "polyfills": ["zone.js"],
        "scripts": [
          "node_modules/grapesjs/dist/grapes.min.js",
          "node_modules/grapesjs-blocks-basic/dist/index.js"
        ],
        "styles": [
          "node_modules/grapesjs/dist/css/grapes.min.css",
          "src/global_styles.css"
        ],
        "tsConfig": "tsconfig.app.json"
      }

然后转到要插入的组件，而不是

#gjs

（当有多个编辑器时可能会导致问题），请选择

#gjs

（模板引用变量），我们可以查看它的子级并输入

 nativeElement

属性添加到配置中。

import { Component, ElementRef, ViewChild } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import grapesjs from 'grapesjs';
import plugin from 'grapesjs-blocks-basic';

@Component({
  selector: 'app-root',
  template: `
    <div #gjs></div>
  `,
})
export class App {
  @ViewChild('gjs') gjs!: ElementRef<any>;

  ngAfterViewInit() {
    const editor = grapesjs.init({
      container: this.gjs.nativeElement,
      // ...
      plugins: [plugin],
    });
  }
}

bootstrapApplication(App);

Stackblitz 演示