GrapesJS 未正确显示答案

【问题标题】：GrapesJS not displayed properlyGrapesJS 未正确显示
【发布时间】：2020-07-30 08:41:25
【问题描述】：

我尝试将 GrapesJS 集成到我的 Angular 页面中，但无法正确显示。我从这里和其他页面尝试了一些其他解决方法，但其中任何一个都帮助我解决了我的问题。

我认为与其描述外观不如观看它：

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

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

谢谢大家

【问题讨论】：

标签： angular grapesjs

【解决方案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

【讨论】：