CODEWITHSUNDEEP
angulargrapesjs
Cerius
Cerius

Reputation: 11

GrapesJS not displayed properly

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

Upvotes: 1

Views: 1127

Answers (1)

GiorgiosJames
GiorgiosJames

Reputation: 1040

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

Upvotes: 2

Related Questions