search

dutchigor / vue-grapesjs-composables-example

0 stars 0 forks source link

Reusing existing grapesjs components and editor bug #1

Open rodenp opened 2 years ago

rodenp commented 2 years ago

Firstly what an incredible project you have here. Combining vue with grapesjs is genius. I have a few questions from having run this example project.

is it possible to reuse existing components like for example from the existing presets like the Webpage Builder or Newsletter Builder? Also is it possible to get the same look and feel of the normal grapesjs?

Lastly when I click on a text element the popup editor is huge and covers a large portion of the screen often hiding the element that is being edited.

4F437172-7B97-4AAE-9CA5-8476E72727E1
dutchigor commented 2 years ago

Thanks for the positive feedback! I'll try to address each of your points below

Is it possible to reuse existing components like for example from the existing presets like the Webpage Builder or Newsletter Builder?

Absolutely. Vue GrapesJS Composables is designed to pick up the components defined in the base GrapesJS. However, note that you do need to define custom components to access the traits and style properties as defined in the Vue GrapesJS Composables readme. Also, I have not tested if the blocks are picked up correctly when added through a GrapesJS plugin so this is something you would need to test and possibly add manually.

Also is it possible to get the same look and feel of the normal grapesjs?

The goal of this project is to allow you to create your own look and feel, fitting with the rest of your project. If you wish to use the GrapesJS look and feel I recommend checking if you are not just better off using GrapesJS directly. It is compatible with Vue out of the box as long as you only use their modules. Just access the resulting html and css using their storage manager (see the implementation of useStorage in Vue GrapesJS Composables

Lastly when I click on a text element the popup editor is huge and covers a large portion of the screen often hiding the element that is being edited.

Odd, I can't reproduce this. Can you check that vue-grapesjs-composables/css/vue-grapes.css is being loaded by the project? If so, what browser are you using? Can you test in incognito (so all plugins are disabled)?