GrapesJS未正确显示

Question

我试图将GrapesJS集成到我的angular页面中，但它不能正确显示。我在这里和其他页面尝试了一些其他的变通方法，但它们都对我的问题有帮助。

我认为最好是看它而不是描述它的样子：

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

也许有人已经对此有了解决方案

感谢所有人

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 web demo，它使用了grapesjs-webpage-preset插件，所以你可能也想安装并导入它。

下面是一个包含上述更改的stackblitz示例：https://stackblitz.com/edit/angular-ivy-bf8xe8