GrapesJS Issues

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

1,399 issues found

πŸ” outdated
#1876Mar 10, 2019by VardanNersesyan2 answers
0 reactions

Export to pdf

Hi all, 1) Can I use this framework for generate pdf file after editing html page? And how can I do it? 2) Can I make ready templates and provide it for editing by user via framework? And how can I do it? Tnx.

artf

Can I use this framework for generate pdf file after editing html page? And how can I do it? There is no built-in command to generate PDF for you but you can get the HTML code of the template and generate the PDF from itCan I make ready te...

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.

#1875Mar 10, 2019by simplecommerce3 answers
1 reactions

ID changes when importing html or passing html in components prop in config.

Hi, I built a component and block that I can drag and drop in the canvas. My issue is that some styles rely on the ID. I know this might not be ideal, but it's like this at the moment. My problem is when I reload the editor with my previous values by passing it in the components prop, all my ID's are changed. Is there...

artf

@simplecommerce new release published

simplecommerce

Anyone have any idea for this issue? My issue happens when I use for example, bootstrap tabs, in order to make them work and load the right tab, it uses the ID, but since the ID is being regenerated when I load the editor with my component...

sbiwaichoon

same issue here.if i have use that id in code, id change when(id-2) reload template to grapejs (auto added "-2" to my id) , if i dont use that id in any part of my code, is fine, id wont change

#1873Mar 9, 2019by alialrabi2 answers
1 reactions

Grid Component Resize Its cells width not works

Hi artf, i have a question when i implement grid component having row and three cells , i want to make these cells resiazable on width and height , So i make an event when component selected set it resizable =true , when resize cells height it works , but the cells width not affect yet when resize it , how i can make...

artf

This is because the grid uses flex so you should use flex-basis for the width. In that case resizable should be an object like this { keyWidth: 'flex-basis' }

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.

#1872Mar 9, 2019by kickbk2 answers
0 reactions

Clicking enter inside a text components many times

Something goes crazy when the text area extend beyond a certain point. I don't know exactly how to describe it so I'm including a screen recording. To reproduce, go to https://grapesjs.com/demo-newsletter-editor.html, enter a text component that is close o the bottom of the viewport, go to the end of the text, and kee...

artf

CKEditor bug (indeed the default RTE is ok), probably related to the element being in the iframe (unfortunately a lot of text editors fails by not considering this aspect) At some point it starts highlighting other components and acting al...

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.

#1870Mar 8, 2019by fmr4112 answers
0 reactions

Set data-gjs-type in tag i (Why iscomponent not working)

when i add block(tag i), data-gjs type is "I" (there is no problem from the trait that I made) i'm have trait but if save and reload, data-gjs type to be "default" (trait doesn't work) Thank's

artf

You store/load incorrectly, read here please https://grapesjs.com/docs/modules/Storage.html#store-and-load-templates

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.

#1869Mar 7, 2019by Ramkumar-Murugesan3 answers
0 reactions

How to add extra field in input traits

Hi, I want to add the new field in default input traits. for example:- i need to add {label: binding, name:binding} in already exist input traits in the above image. i need to add the new field in between of name and placeholder. can anyone please help me Thanks in Advance

arthuralmeidap

In the docs, there is exactly an explanation about what you are looking for. Take a look here: https://grapesjs.com/docs/modules/Traits.html#add-traits-to-components

Ramkumar-Murugesan

I did this by using and its working fine

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.

#1868Mar 7, 2019by sakshigarg93 answers
1 reactions

How to enable functionality only for specific image component, not all

I've enabled the fa fa-pencil icon into my image components, but I want it to be enabled only in specific image components, not all of them. How can I achieve that? This is my code

arthuralmeidap

You are on the right path. Yes, you have to create a new component for that but you can't override the Image component type otherwise, as you have seen, all the images will get that. What makes those images unique? How could you differenti...

sakshigarg9

I tried this and removed gjs-data-type="image" from the img tag where i want the functionality to be applied. But, neither does it implement the functionality on it and but also messes with the rest of component properties.

artf

@sakshigarg9 to prevent messes use the new addType (in your case you miss the view property and this breaks stuff in the old declaration) BTW I suggest to create a NEW component type by extending the image instead of just extending the cur...

#1867Mar 6, 2019by arthuralmeidap2 answers
0 reactions

Custom compoent and JS

Hi @artf , I'm trying to create a custom component and attach a JS to it. To give you a better example, think this component as a Slideshow component. For this component, I have some custom traits to allow the user to change some pre-defined configurations. The problem is happening when I attach the Js through the scr...

artf

The problem is happening when I attach the Js through the script key while I'm adding the block. The isComponent method is not being called for my new custom component. Hi Arthur, can you provide some code example of your case because I ca...

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.

#1865Mar 6, 2019by Gianglo2 answers
0 reactions

Grapes change page position

Hello, I found the following problem using grapes inside an html page: when you click on some elements of the editor, such as the arrow to move an element in the label manager, all the page shift up. The problem is also found in your JSFiddle Starter template https://jsfiddle.net/szLp8h4n.

artf

Ok, we use the scrollIntoView API to center elements in the canvas (when you select the component in Layers) and layers (on component select in canvas) but seems like this bubbles up to the main window. By looking at https://stackoverflow....

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.

#1864Mar 6, 2019by simplecommerce3 answers
3 reactions

Best way to listen to changes on the final HTML?

Hi, I just had a quick question because I could not figure out how to do it or did not find an issue related to it. I am just trying to call a function when any changes is done on the canvas. For example, I am adding a block or removing a block. I am changing the attributes using the style manager. Or drag and droppin...

a-bashtannik

@simplecommerce , try also this, maybe fit better for you

arthuralmeidap

The way you did is the simplest way to achieve that in my opinion.

arthuralmeidap

What do you want to achieve at the end? You could use something like editor.on('all', () => //your code here ); but this is not practical at all. there are many events being triggered by GrapesJS and I don't think this will suit your needs.

Browse all topics