如何将 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（如果存在）或添加包含 declare module 'node_modules/grapesjs';”的新声明 (.d.ts) 文件。如何清除错误？

Answer 1

这是打字稿问题。

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

对此的快速修复是通过在导入之前添加禁用规则来禁用此检查

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

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

如果你想更好地理解这个问题，我建议你搜索你的错误文本并找到一些带有更多解决方案的 typescript stack overflow。您还可以在此处查阅 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

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

Answer 3

使用：

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 4

第一步： 使用

安装

npm i grapesjs --save

第二步： 将样式和脚本添加到 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"
                ]
            }
        }
    }
}

第三步： Refrence

如果 /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是多余的

如何将 GrapesJS 与 Angular 集成？

How to integrate GrapesJS with Angular?

angular

grapesjs