如何将 GrapesJS 与 Angular 集成？

Posted 2023-03-13

【中文标题】如何将 GrapesJS 与 Angular 集成？

【英文标题】：How to integrate GrapesJS with Angular?

【发布时间】：2021-03-10 22:52:10

【问题描述】：

我已安装（关注此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）文件。如何清除错误？

【问题讨论】：

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

【参考方案1】：

这是一个打字稿问题。

您似乎正在使用 typescript，但 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

【参考方案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-redcolor: red',
);

【参考方案3】：

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

【参考方案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/ 目录不存在，则在 /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是多余的。