GrapesJS Issues

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

569 issues found

๐Ÿ” canvas
#2667March 19, 2020by sampathrajs3 answers
0 reactions

link element not append in head element in ediot.canvas #firefox #grapesjs

am trying to add google fonts in web-builder to change the font style for that to import am adding cdn in editor the code works in chrome and safari but firefox not working createLinkElement(fontFamily) { let link = document.createElement("LINK"); link.setAttribute("rel", "stylesheet"); link.setAttribute("href", https...

artf

I've made the issue template for a reason

sampathrajs

I've made the issue template for a reason i want to add custom fonts in web builder could you please help me out

RutujaBadbe

Hi! might be very late to comment but have you tried this? - const link1 = document.createElement('link'); link1.rel = 'stylesheet'; link1.href = '/page-builder-assets/css/style.css'; canvas.getDocument().head.appendChild(link1); it worked...

#2663March 17, 2020by h3llomoto2 answers
0 reactions

[BUG] WASD keypress returns an errror at Canvas

Hi there, I get an error on a keypress at canvas without RTE enabled. Uncaught TypeError: Cannot read property 'hasFocus' of null node_modules/grapesjs/src/canvas/index.js:544

artf

What do you mean by without RTE enabled? I'm not able to reproduce it. Create a live demo with all the necessary steps, please

no-response[bot]

This issue has been automatically closed because there has been no response to our request for more information from the original author. With only the information that is currently in the issue, we don't have enough information to take ac...

#2656March 16, 2020by abozhinov3 answers
1 reactions

[BUG] Wrong position of toolbar when duplicate children component

Hi, you can check this example: https://codepen.io/abozhinov/pen/XWbqjEJ Steps to reproduce the problem:If components existing delete them all.Drag a new carousel block. Select the first children's container.Click on the DUPLICATE icon to create a new component.After that try to select the newest component and then se...

abozhinov

When overwrite these two methods in 'select-comp' command everything works perfectly. The problem was that "el" doesn't exist in the DOM. ` onHovered(em, component) { let result = {}; if (component) { const { view } = component; const { el...

abozhinov

The same result you can get when trigger render instead of reset.

abozhinov

@artf if you try on the demo is the same. Just drag the carousel and click on the slide. <img width="1440" alt="Screenshot 2020-03-16 at 14 58 23" src="https://user-images.githubusercontent.com/1404839/76760669-b8b75780-6796-11ea-8e24-8946...

#2650March 14, 2020by abzal03 answers
2 reactions

Slick.js reload the slider on image asset change

Hello everyone, I am integrating slick slider, the issue is with reloading the slider after image is uploaded. After onclick of open assets the Slick slider must be reinitialized so that regular html of the slider would become slick slider, that happens on adding the component to the canvas only: $('#slickslider').sli...

pouyamiralayi

Hi @abzal0 the correct function is actually `updateScript my bad! here is how i did it: first defining the component type: Every time the script runs, i reset the slickjs for the sake of re initialization which you can see in the script. I...

abzal0

@pouyamiralayi this is incredibly valuable code, thanks a lot for sharing it :) it works better than I needed. Will be sending you an email, hopefully you will reply.

pouyamiralayi

@abzal0 how to reinitialize 'script' function inside editor.blockmanager.add to reload the jquery code of slider? for your `script` code, i suggest you move it to the component definition and in there, you can issue: for script reloads. Ch...

#2644March 13, 2020by Eshayat3 answers
7 reactions

[HELP] GrapesJS load html/css from Database

Hi there, We are using grapesjs in our Angular app. We have managed to create and save the grapesjs html/css in our database. One of the things we still couldn't find our that, In edit mode we want to call our API and get the HTML, CSS and load it into grapesjs canvas. We have tried with storage manager but that didn'...

mcottret

At first, I'm thinking i won't use the native storage manager that's how i wanted to call.Let me know how we should do this, If for any reason you're not willing to use the storage manager, I believe this configuration can only be used to...

mcottret

Hi @Eshayat,We have tried with storage manager but that didn't work Could you elaborate ? Have you properly followed the "Setup remote storage" & "Setup the server" sections of the "Storage Manager" documentation ? The following configurat...

Eshayat

Hey there, the second method worked. Thank you

#2639March 12, 2020by MiseryMachine3 answers
0 reactions

[QUESTION]: GrapesJS moving Mustache tokens

Hello, I am working with GrapesJS to allow users to create report templates. I've run into a problem with a block that creates a table, but the table rows are determined by Mustache tokens. However, when rendered, the tokens are moved outside of the table element. I believe the table or table row style is not allowing...

pouyamiralayi

@MiseryMachine have you tried wrapping your table internal's inside a `tbody` in your block definition? or at least moving your mustache tokens inside a tag?

MiseryMachine

Thanks for your suggestion. I have tried that with the same result, unfortunately. block script: Output: Maybe it's because GrapesJS is, by default, enforcing HTML structure. I'm still trying to work this out though.

artf

No, you can't do that because in that case, you have an invalid HTML, so the HTML parser moves it out. You have to create a valid HTML content to make the browser render it correctly:

#2628March 8, 2020by abzal03 answers
2 reactions

How to update the trait value

Hello @artf thanks a lot for a great project, I have created a new type, it is similar to regular link, but the link title updates with ajax. Then updates the trait 'linktitle'. The value of it and the canvas do update, but the trait inside "Settings" still shows the initial value and does not changes. Part of the cod...

pouyamiralayi

@abzal0 alright! although the prop approach must work fine, i am not sure why it is not, or i am missing something here! if we want to go with attributes, you must use `addAttributes` for changing the attribute, here is a working example o...

abzal0

@pouyamiralayi thanks a lot for your time, this solved the issue: this.model.addAttributes({'linkTitle':oldValue + ' Changed!'}) you saved so much time, thanks again :)

abzal0

editor.getSelected().getTrait('linktitle').set('value','CCC'); does not works too

#2626March 6, 2020by ikenderham3 answers
0 reactions

[QUESTION] Move component up or down through panel button

Hello i thinking of making a function that move component up or down in the canvas, when a button beeing pushed. Is it possible, and can anyone show me how to do it? Maybe this future is allways there?

artf

You can do something like this to move components

ikenderham

Hello Thanks for the answer.. But how do I add the button to component toolbar? I tried the examples on issues/266 but its not working here. Can i overrule the toolbar in another file, so i dont need to change the core files?

ikenderham

I found out how to do that. the code you provided me is not working for me. I tried to add it in a command, but its not moving the component up or down. Here is a example: If i have a row with content inside, then i need to move the contai...

#2612March 2, 2020by pradeeshattlee1 answer
0 reactions

GrapesJs Asset Manager Not working with iPad & Touch enabled devices

Hey @artf I have a question around Asset Manager. When uploading an image via computer or URL You can create image blocks with the command from the left panel and edit them with double click everything Seems to work perfectly. But when I try the same in an iPad or a Touch-enabled device it doesn't work I used this Plu...

bgrand-ch

Hello, For future questions or technical issues, which aren't bugs, GitHub's Discussions tab is the place to be. Don't forget to close this issue if it is resolved or write a new detailed message in Discussions -> Q&A category (and close t...

#2611February 29, 2020by orionseye2 answers
0 reactions

[HELP] Dragging external content to Canvas

I am trying to add d&d functionality from a modal which lists a bunch of html files (html snippets) .. into the editor canvas. Each of them enclose the content with a <section> I tried to use 'canvas:dragdata' to allow dropping into canvas As i understood, this is to extend the file types can be dropped, GrapesJS supp...

orionseye

I am clarifying what i want to achieve: I have some 100+ html snippets which i use on current 'handcrafted' builder and need to migrate them to GrapesJS. To my surprise,, this doesn't seem to be a straight forward job. Currently, with 2 Aj...

artf

Here you can find how to do that https://github.com/artf/grapesjs/issues/2595