GrapesJS Issues

3,464 parsed GitHub issues โ€” 370 solved ยท 90 open. Search, filter and explore battle-tested answers.

829 issues found

๐Ÿ” question
#2284September 21, 2019by benvmatheson1 answer
0 reactions

[Question] Should a class deselected on one component be deselected on other components?

I'm not sure if this is a bug, or if I'm just misunderstanding usage. Click component1 -> add class1 --> click the checkmark to deselect class1 on component1. Click component2 -> add class1 class1 will already be deselected. If you click the checkmark, then click component1, the checkmark for class1 is now selected on...

artf

No, it's not for disabling classes on components (in that case you have to remove it) but for changing the selector in Style Manager, so you can change what you need to style

#2283September 20, 2019by gagan3481 answer
0 reactions

[Question] How do I pass resizable onMove function in data-gjs-resizable attribute

onStart event is working fine while creating component but I want to add it while creating block. Here is my code: const keyWidth = 'flex-basis'; const step = 0.1; const minDim = 1; const currentUnit = 1; const resizerRight = { tl: 0, tc: 0, tr: 0, cl: 0, bl: 0, br: 0, cr: 1, bc: 0, keyWidth, currentUnit, minDim, step...

artf

You can write content as Component Definition instead of the HTML string

#2280September 19, 2019by Davidvlv1 answer
2 reactions

[Question] How to show the traits manager button/panel

Hi, I must be missing something basic, but how do I add the traits manager panel without adding a plugin? The newsletter plugin has it added by default: But the editor with no plugins added does not have it:

pouyamiralayi

Hi there! i am not aware of your current page DOM structure. but i always do the customization this way: then in your editor instantiation config: same scenario goes for others like: style manager, layer manager... cheers.

#2279September 19, 2019by brentonkelly19821 answer
6 reactions

[QUESTION]: How to update the model for a custom component when a trait is changed.

Hi! I have read and re-read the GrapesJS Docs and API Reference on how to create a custom component and I just can't seem to figure it out. I initially started trying to extend the existing video component but then decided to make my own custom video component. I'm using the existing video component as a guide. My com...

brentonkelly1982

I have finally figured this out on my own and want to share the result for anyone else that is struggling with this the way I did. This code snipped creates a custom, responsive video component that supports YouTube, Vimeo, MyVRSpot, and a...

#2278September 18, 2019by ivcaRealWare3 answers
3 reactions

[QUESTION]: Simplify dropping columns/rows

What I need is to simplify dropping elements in a way to speed up page creation. So if I drop a column and there is no parent row there, I would like to be added automatic. Same for dropping row. If I drop a row without container it would be nice to be able to add container automatic. What is the best approach to do t...

pouyamiralayi

hi!because draggable property for column have value ".row" just get rid of this. we do not need draggable here because we are doing the check ourselves: if you need any further help for your specific case, i would appreciate a fiddle. chee...

ivcaRealWare

I try to solve this with that proposal event. But when I try to drop column somewhere else it does not allow because draggable property for column have value ".row" so on editor.on('block:drag:stop', function (element) element is null if c...

pouyamiralayi

hi there! see if this can help you out. cheers.

#2274September 17, 2019by tom-sherman3 answers
4 reactions

[QUESTION] How to load children of a readonly component?

I'm trying to mount a readonly component (draggable, droppable etc all set to false) and allow the user to edit child components inside. For example if I have the following content I want to load all of this content inside of the component, and allow the user to drag new blocks where it would say "EDIT ME"

pouyamiralayi

hi there! you can set draggable property of the target component this way: this way, it will only be draggable inside the Slot. the same can be done for readonly type. if you need further help for your specific case, i would appreciate a f...

pouyamiralayi

Hi there! if you mean injecting the component into the editor without user interactions, you can use: more on this hereallow the user to drag new blocks where it would say "EDIT ME" if you mean making the readonly component editable again,...

tom-sherman

@pouyamiralayi Thanks! I've implemented a Slot component and overriding the attributes inside of the init method The issue I'm having now is that the use is able to drag an item above the readonly header for example. Is there a way to prev...

#2268September 13, 2019by tom-sherman1 answer
0 reactions

[QUESTION] Is there a schema for the content object model?

It would be great if this exists as to write a renderer for the content of the editor I currently need to scour through the source to work out the exact format. It would also be helpful when defining types. Could it be generated from the Backbone models maybe?

artf

There is an open issue about Typescript declarations #1759

#2267September 12, 2019by Sparke21 answer
0 reactions

[QUESTION] Are there any component libraries?

The question I like grapesjs and I think that it is the best GUI builder solution but I can't find any built-in component libraries. I know there are official extensions but there are few elements. Are there any additional plugins/ libraries/ templates? May be developed by some 3d party devs. I'm looking for[ ] progre...

artf

Try this one: https://github.com/kaoz70/grapesjs-blocks-bootstrap4

#2263September 11, 2019by benvmatheson1 answer
0 reactions

[Question]: Is it possible to get CSS excluding protected CSS?

I'm attempting to build this: https://github.com/artf/grapesjs/issues/324 I've noticed that each time the CSS is saved, the protected CSS is prepended. This results in duplicate CSS rules:{ box-sizing: border-box; } body { margin: 0; } *{ box-sizing:border-box; } body{ margin-top:0px; margin-right:0px; margin-bottom:0...

artf

Use this option editor.getCss({ avoidProtected: true })