GrapesJS Issues

3,464 parsed GitHub issues β€” 370 solved Β· 90 open. Search, filter and explore battle-tested answers.

877 issues found

πŸ” question
#3506May 31, 2021by iabhiyaan3 answers
5 reactions

Add click event on blocks

Or Is there any way to listen for click event in block ?

artf

Well you can actually make use of custom render from blocks to apply custom DOM events.

YyueeiWY

<pre> editor.on('component:selected', (some, argument) => { console.log(some, argument); }) </pre> https://grapesjs.com/docs/api/editor.html#available-events

GJSBlock

Thanks for reporting this, @iabhiyaan. Great question about FEAT: add click event on blocks. The recommended approach with GrapesJS is to use the event-driven API. Start here: Check the GrapesJS documentation for your specific module Look...

#3504May 31, 2021by snowballrandom2 answers
0 reactions

I noticed that an earlier version of font awesome version 4.7 is being used.

I noticed that an earlier version of font awesome version 4.7 is being used. I use version 5.2 of fontawesome and it seems to cause issues when loaded alongside the version used with Grapes JS some of the fonts are not loading or class names have changed in the new fontawesome character set. How can I use the newer ve...

artf

You can change this option on init: https://github.com/artf/grapesjs/blob/88249c38577852dc3c42047356a70a12066ee6ca/src/editor/config/config.js#L165-L168

GJSBlock

Thanks for reporting this, @snowballrandom. Great question about *. The recommended approach with GrapesJS is to use the event-driven API. Start here: Check the GrapesJS documentation for your specific module Look for the on() event listen...

#3496May 28, 2021by anlumo4 answers
1 reactions

Mark Component as Dirty

What are you trying to add to GrapesJS? Component should be able to mark themselves as dirty, triggering the onbeforeunload warning message. Describe your feature request detailed I have a (custom) text component where the user can enter arbitrary text. I'm storing the data on my server, and I want autosave. However,...

anlumo

I worked around this by completely disabling the onbeforeunload handling and rolling my own.

artf

The editor has editing property which changes any time RTE is enabled/disabled, so I guess, in your case, this should work

anlumo

Wouldn't this onbeforeunload handler be overwritten afterwards by the snippet I referenced above?

#3492May 27, 2021by iabhiyaan2 answers
0 reactions

InsertAdjacentHTML('afterend', '<section></section>') . Is there any api like this in grapesjs ?

Is there any way to add new section after the selected component using grapesjs ?

artf

You can do it in this way:

GJSBlock

Thanks for reporting this, @iabhiyaan. Great question about FEAT: insertAdjacentHTML('afterend', '<section></section>') . Is there any api like this in grapesjs ?. The recommended approach with Components is to use the event-driven API. St...

#3491May 27, 2021by TheDude702 answers
0 reactions

Iframe does not save src / does not recognize iframes after load

Version: 0.17.4 Are you able to reproduce the bug from the demo?[ ] Yes[X] No What is the expected behavior?After inserting an iFrame that the src will be returned when using editor.getHTML()When loading a page that iframes will be recognized as iframe component and become editable again Describe the bug detailed Am a...

artf

I'll add iframe support in the next release

GJSBlock

Thanks for reporting this, @TheDude70. The issue with iframe does not save src / does not recognize iframes after load appears to be a race condition or state management timing problem. This typically happens when component lifecycle event...

#3490May 27, 2021by samichamoun2 answers
0 reactions

Large images make area of content editor unreachable

Hi, If you for example add a 3 column block to a page, and try dragging a very wide image into each column, the content stretches and the overflow is hidden. How do we either add a vertical scrollbar or force the editor to limit the viewable size of images when dragged in. Currently if the content goes outside that ar...

artf

This is more a layout issue that you can easily fix by adding your CSS to all images, eg. img { max-width: 100%; }

GJSBlock

Thanks for reporting this, @samichamoun. Great question about Large images make area of content editor unreachable. The recommended approach with GrapesJS is to use the event-driven API. Start here: Check the GrapesJS documentation for you...

#3489May 27, 2021by samichamoun1 answer
0 reactions

Large images push out column width in editor view

Just as a preface, the issue I'm describing does not affect the output of content generated by the editor, it is just when looking at the content within the editor. Let's say I create two columns on the editor. Both are 50% width each. If I drag a large image into one of these cells, it pushes the width of the cell ou...

GJSBlock

Thanks for reporting this, @samichamoun. Great question about Large images push out column width in editor view. The recommended approach with GrapesJS is to use the event-driven API. Start here: Check the GrapesJS documentation for your s...

#3486May 26, 2021by kuhelbeher2 answers
0 reactions

Ability to change all margin, padding etc properties together

Hello, right now grapesjs provides built in properties like margin, padding that allow user to change each property one by one (margin-top, margin-bottom, etc). It would be nice to have ability to change all these properties together. To have some lock button, for example, when it's enabled it will change all properti...

artf

Yeah, that would be cool, but unfortunately, GrapesJS doesn't have yet the proper UI module which could allow easily to build new UI components by reusing others, so StyleManager.addType is the only way but in that case, it's up to you bui...

GJSBlock

Thanks for reporting this, @kuhelbeher. Great suggestion about FEAT: Ability to change all margin, padding etc properties together! While this specific feature isn't yet in the core API, there are several ways to achieve similar behavior....

#3485May 26, 2021by ahmedderkaoui1 answer
0 reactions

Element injected as HTML to canvas doesn't behave as a component

Consider a simple block: When dragged to canvas, this component can be selected and it's possible to modify its settings. Now, i'm doing this, to add the same input in a card: $(someElement).find(".card").html('<input type="text"/>'); The input is added successfully but doesn't behave as it did before. It can't be sel...

GJSBlock

Thanks for reporting this, @ahmedderkaoui. Great question about Element injected as HTML to canvas doesn't behave as a component. The recommended approach with StyleManager is to use the event-driven API. Start here: Check the GrapesJS doc...

#3483May 25, 2021by Palash-Mandal2 answers
0 reactions

Hello @artf ,

Hello @artf , Many Many Thanks for previous help. I am fresher in development. Please help me with below I need a modal where I will get user input Like Block Name, Category, HTML, CSS, JS then click on save to store that as new block manager. Mean how to pass those data and store them as dragabe component I have made...

artf

Please follow the issue template

GJSBlock

Thanks for reporting this, @Palash-Mandal. Great question about *. The recommended approach with StyleManager is to use the event-driven API. Start here: Check the GrapesJS documentation for your specific module Look for the on() event lis...

Browse all topics