1

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

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Cerius
  • 11
  • 1

1 Answers1

2

Looks like the way you have your Angular config setup in your example, you need to put style imports in the ./src/styles.css file to have them imported correctly.

// 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';

At this stage it still looks a bit bare. If you want it to look like the grapesjs web demo, that uses the grapesjs-webpage-preset plugin, so you might want to install and import that too.

Here's an example stackblitz with the above changes: https://stackblitz.com/edit/angular-ivy-bf8xe8

GiorgiosJames
  • 742
  • 7
  • 11