GrapesJS Issues

Search parsed GitHub issues, see highlighted answers, and open the original discussion when needed.

3464 issues found

#1872March 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.

#1870March 8, 2019by fmr4112 answers
0 reactions

[QUESTIONS] 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.

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

[QUESTION] 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.

#1868March 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...

#1867March 6, 2019by arthuralmeidap2 answers
0 reactions

[BUG] 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.

#1865March 6, 2019by Gianglo2 answers
0 reactions

[Bug]: 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.

#1864March 6, 2019by simplecommerce3 answers
3 reactions

[QUESTION] 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.

#1863March 6, 2019by sakshigarg93 answers
3 reactions

Adding new components to Block Manager

I'm trying to add multiple components which are in my canvas into the block manager but I believe because of an id issue they're not visible properly. What exactly does the id refer to? Here's my code:

WebEtSolutions

Hi, Your LinkedIn sign-in id is the same that your GooglePlus sign-in. The key of block must be unique. Bye

arthuralmeidap

The id is used internally to track each block individually. As @WebEtSolutions said you should put unique identifiers to each new block

sakshigarg9

OHH alright, worked, thanks!

#1862March 6, 2019by sakshigarg93 answers
0 reactions

Reflect deleted components in block manager

How can I create dynamic components in block manager such that when a delete action is performed on a component it triggers the component to be placed in the block manager?

arthuralmeidap

Well, component and blocks are different concepts. If you are saying about blocks you can use the .trigger('remove') on the block that will remove it from the BlockManager

artf

@sakshigarg9 Read the documentation https://grapesjs.com/docsTry to understand what you're readingTry to solve your issues by yourselfIf you're not able to do it, then you can open an issue, by following its template, and SHOW US what you...

sakshigarg9

@artf thanks for all your patience, I'll do the same now onwards

#1861March 6, 2019by sakshigarg92 answers
0 reactions

Asset manager for buttons and text

Just like an image has an asset manager that can provide predefined alternatives for the image component, is it possible to implement a similar thing for buttons and text. Like providing alternative icons for the button component or alternative predefined text for the text component. For eg, in place of the "Show" but...

artf

@sakshigarg9 with custom Components you can do whatever you want. Probably just take a look at how the image component is made (its model and view)

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.