GrapesJS Issues

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

569 issues found

๐Ÿ” canvas
#893February 23, 2018by alimajed933 answers
3 reactions

Add attribute to HTML

Hello everyone, I want to add an id for each block I drag and drop in the canvas; To be more clear, I do not want to add an Id for each type, per example: Image, Table, Box, ... I want to add ad Id for each block, which means per example, the block "1 section" becomes <table ... blockId = 1>. I am trying to use those...

nojacko

I think you need to add the attribute to the model, rather than the view. https://github.com/artf/grapesjs/blob/50cc585f23f2560077fd0e9a42ced22e67e69723/src/dom_components/model/Component.js#L298 Then, you'll need to render the view. I thi...

ezp127

Hello, Just leaving an example in case someone else needs.

artf

Just like James suggested but without selected.view.render() as the view will receive changes simultaneously

#885February 20, 2018by kundarmah2 answers
0 reactions

[Help Wanted]: Auto Stripping Tags with Variables?

When the custom block is added, it will strip HTML tags that contains the curly braces. The anchor link will be removed. Only the div will be rendered on the canvas. Is there a way that it will ignore the variables?

artf

Just tested your code with the public demo, everything works as expected Try to check also the block content via the inspector console as it might also be some server-side effect

lock[bot]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

#880February 16, 2018by ancanot2 answers
0 reactions

Custom block with outside plugin in Grapesjs

I want to integrate Image viewer jquery plugin in grapesjs new custom block. I have loaded jQuery first. ImageViewer Plugin url - https://www.jqueryscript.net/gallery/jQuery-Plugin-For-Product-Viewer-with-Image-Hover-Zoom-BZoom.html The problem is that, when I create component, plugin connected (I give plugin js in in...

artf

I can not handle double click event for open modal and changing image (in double click event working ImageViewer click event) This depends on what the plugin does with the DOM. The double-click event is binded to you images but if images a...

lock[bot]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

#861February 12, 2018by hillelcoren3 answers
0 reactions

[Question] Help adding images to the canvas

I've followed the docs and have been able to upload images. When I drag an image block (using the newsletter preset) and select an image from the assets it adds a blank image to the canvas. I need to double click the image on the canvas and select the image again for it to show. Is there something I need to do to wire...

artf

... it adds a blank image to the canvas Can't reproduce it. Any live demo? Or at least a screencast/gif?

hillelcoren

I put together a basic sample and it works, it must be a problem with my code.

hillelcoren

Sorry to take up your time! If anyone else sees this problem in my case it was happening because I was using the canvas:drop event to adjust the HTML (to perform a mail merge). I've fixed it by checking if the user is dropping an image in...

#860February 12, 2018by vrudikov3 answers
0 reactions

Can't bootstrap GrapesJS + Material Design Lite integration

So i'm trying to bootstrap this integration and i think MDL framework doesn't run, because JS components are not initialized at all Here is the plunker I digged into the code of both GrapesJS and MDL and both seems work ok. I tried several ways of initializing MDL JS: canvas init, init script after GJS div content, bu...

artf

Hi @vrudikov JS seems to be loading correctly (and you can see that by other JS elements like dialog) but seems like MDL is not auto-initializing. I think you just have to find how to call its init method

vrudikov

For everyone who want to have Material + GrapesJS integration - just use material-components-web

lock[bot]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

#859February 12, 2018by hibuno2 answers
2 reactions

[QUESTIONS] Change canvas style

Hi there, I have some question about canvas style, in this case i have config like this. By default i use css with name builder-desktop.css for default canvas style. And then i want if i change Device Manager and choose mobile, i can change a canvas style to builder-mobile.css. Thank you very much

hibuno

Hi there, Forget it i solve this problem, just add event on change like this. Thank you

lock[bot]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

#850February 8, 2018by austinbiggs3 answers
0 reactions

[Question]: Component:Moved Event

What I'm trying to accomplish: I have a piece of code I need to run when a component is "dropped". I put "dropped" in quotes, because it needs to fire when the tlb-move ends. So as a user, if I click the Move icon in the toolbar, when I finishing moving the component I need my code to fire. I've tried quite a few even...

artf

Have you tried with Components-&-JS?

maxtacco

Having the same problem - I can't figure out an event on a component to listen for when move ends.

maxtacco

So, the only way I was able to make it reasonably work was to listen for the "selectedComponent" event that is fired in https://github.com/artf/grapesjs/blob/b62e032b06f45382849b59e6a3f32049f0a021fc/src/commands/index.js#L168 in my compone...

#845February 7, 2018by chiqui3d3 answers
1 reactions

Impossible to select Iframe

I've created a new type of component an general iframe, avoiding selecting the map, but when I try to select it in canvas so that the settigns appear it's impossible for me. This is the component code.

artf

Hey @chiqui3d try to copy the view logic from the ComponentMapView. Basically you're not able to select it because everything inside it is overlapping the iframe element itself (elements inside iframe are out of the editor's scope). As you...

chiqui3d

OK, but then I can never edit the previously created iframe src, or I can do is create a div envelope with editor on load in the view, for iframe elements not created from grapesjs, right? thanks @artf

lock[bot]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

#835February 4, 2018by chiqui3d2 answers
1 reactions

Update the Canvas with a custom function

I'm trying to create a function that replaces all the attributes of link, these make the change in the canvas, but don't save it when I try it with the editor.storage() function; here the code:

artf

@chiqui3d in this way you're just updating the view, the output code is generated by the model instead (when you update the model changes are reflected in the view) So your example will be something like this

lock[bot]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

#828February 1, 2018by maxtacco2 answers
0 reactions

[QUESTION] Components 'add' event fires different number of times

Hi, I've noticed that if I add the following code in my custom component the event fires differently depending on whether a new child component is drag and dropped from blocks vs canvas. Only one event is fired when I drag and drop a child component from the blocks section. But, when I drag and drop from canvas I can...

artf

Hi @maxtacco, unfortunately, this is due to how the Sorter works when moves components and honestly, at the moment, I can't see better workaround than your one

lock[bot]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.