angular - GrapesJS not displayed properly

Question

I tried to integrate GrapesJS into my angular page, but it's not displayed correctly. I tried some other workarounds from here and from other pages but any of them helped me with my problem.

I think its better to watch it instead of describe the look:

https://stackblitz.com/edit/angular-ivy-ew53kw

Maybe someone has a solution for this already

Thanks to all

Answer 1

看起来您在示例中设置 Angular 配置的方式，您需要将样式导入放入./src/styles.css文件中以正确导入它们。

// In ./src/app/app.component.ts
import { Component, OnInit } from '@angular/core';
// remove this line
// import 'grapesjs/dist/css/grapes.min.css';
import grapesjs from 'grapesjs';

// In ./src/styles.css
// add the style import here
@import 'grapesjs/dist/css/grapes.min.css';

在这个阶段，它看起来仍然有点裸露。如果您希望它看起来像使用该grapesjs-webpage-preset插件的grapesjs Web 演示，那么您可能也需要安装和导入它。

这是具有上述更改的示例 stackblitz：https ://stackblitz.com/edit/angular-ivy-bf8xe8