angular - 如何将 GrapesJS 与 Angular 集成？

Question

我已经（按照这个https://medium.com/@camiloht23/integraci%C3%B3n-de-grapesjs-con-angular-11ebf3bb80c5）安装并尝试在 Angular 中导入 GrapesJS。但是我收到一个错误，因为“找不到模块'node_modules/grapesjs'的声明文件。'app-test/node_modules/grapesjs/dist/grapes.min.js'隐含着'any'类型。npm install @types/grapesjs试试看存在或添加一个包含“.d.ts”的新声明（.d.ts）文件declare module 'node_modules/grapesjs';。如何清除错误？

Answer 1

这是一个打字稿问题。

似乎您正在使用打字稿，但 GrapesJS 还没有类型定义。

对此的快速解决方法是通过在导入之前添加禁用规则来禁用此检查

// @ts-ignore
import * as grapesjs from 'grapesjs';

types.d.ts更好的解决方案是在项目的根目录中创建一个文件declare module 'grapesjs'，然后确保它包含在您的打字稿转译步骤中。如果您不熟悉 Typescript，这比上面的禁用规则要复杂一些。

如果您想更好地理解这个问题，我建议您搜索错误文本并找到一些带有更多解决方案的打字稿堆栈溢出。您还可以在此处查阅 Typescript 文档https://www.typescriptlang.org/docs/handbook/2/type-declarations.html

在不久的将来，我们可能会有 GrapesJS 的类型，目前的讨论发生在这里：

https://github.com/artf/grapesjs/issues/1759

https://github.com/artf/grapesjs/pull/2224

Answer 2

采用：

npm i grapesjs

然后添加到 angular.json

"projects": {
   ...,
   "architect":{
      ...,
      "options": {
         "build": {
             ...,
             "styles": {
                ...,
                "node_modules/grapesjs/dist/css/grapes.min.css" //<-- Add this
             },
             "scripts": {
               ...,
               "node_modules/grapesjs/dist/grapes.min.js", //<- Add this
             }
         }
      }
   }
}

最后添加到您的 component.ts 中是这样的

import 'grapesjs-preset-webpage';
import grapesjs from 'grapesjs';

...

var editor = grapesjs.init({
  container : '#gjs',
  components: '<div class="txt-red">Hello world!</div>',
  style: '.txt-red{color: red}',
});

Answer 3

declare var grapesjs: any;我通过在 ngOnInit() 方法中添加 component.ts 和初始化编辑器来清除此错误。

Answer 4

步骤1： 使用安装

npm i grapesjs --save

Step2： 将样式和脚本添加到 angular.json

"projects": {
    // ...,
    "architect":{
        // ...,
        "options": {
            "build": {
                ...,
                "styles": [
                    ...,
                    // Add this line
                    "node_modules/grapesjs/dist/css/grapes.min.css"
                ],
                "scripts": [
                    ...,
                    // Add this line
                    "node_modules/grapesjs/dist/grapes.min.js"
                ]
            }
        }
    }
}

Step3： 参考

如果 /src/ 目录不存在，则在文件名 typings.d.ts 中创建它。打开文件 typings.d.ts 并添加以下内容：

declare var grapesjs: any;

第四步： 现在打开你的 component.ts 文件并初始化库：

grapesjs.init({
    container: '#gjs',
    fromElement: true,
    height: '300px',
    width: 'auto',
    storageManager: false,
    panels: { defaults: [] },
});

在你的 component.html

<div id="gjs"></div>

注意：在组件文件中导入grapesjs 是多余的。