如何将GrapesJS与角度集成？

Question

我已经(遵循这个https://medium.com/@camiloht23/integraci%C3%B3n-de-grapesjs-con-angular-11ebf3bb80c5)安装并试图导入GrapesJS的角度。但是我收到了一个错误，因为“未能找到模块‘node_node/grapesjs’的声明文件。'app-test/node_modules/grapesjs/dist/grapes.min.js‘隐式地具有'any’类型。如果存在，尝试npm install @types/grapesjs，或者添加一个包含declare module 'node_modules/grapesjs';的新声明(.d.ts)文件”。如何清除错误？

Answer 1

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

Answer 2

这是打字稿的问题。

似乎您正在使用类型记录，但是GrapesJS还没有类型定义。

解决此问题的一个快速方法是在导入之前添加一个禁用规则来禁用此检查。

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

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

如果您想更好地理解这个问题，我建议您搜索错误文本，并找到一些带有更多解决方案的类型记录堆栈溢出。您还可以在这里查阅类型记录文档( 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 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}',
});