GrapesJS Issues

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

829 issues found

๐Ÿ” question
#2885July 9, 2020by Drishya12345No answers
0 reactions

is animation supported in grapejs?

WARNING READ and FOLLOW next 3 steps, then REMOVE them before posting the issueFollow CONTRIBUTING Guidelines https://github.com/artf/grapesjs/blob/master/CONTRIBUTING.mdDo a quick SEARCH first, to see if someone else didn't open the same issueAll relative statements/questions have to be filled/answered, otherwise, th...

#2884July 9, 2020by Drishya12345No answers
0 reactions

FEAT: Do you support animation in grapejs?

WARNING READ and FOLLOW next 3 steps, then REMOVE them before posting the issueFollow CONTRIBUTING Guidelines https://github.com/artf/grapesjs/blob/master/CONTRIBUTING.mdDo a quick SEARCH first, to see if someone else didn't open the same issueAll relative statements/questions have to be filled/answered, otherwise, th...

#2867July 1, 2020by Lostpixelr1 answer
0 reactions

[Question] not escape html characters in textNodes?

Hi, We are using some Twig template features in our grapesjs implementation. like: {% if variable == "value" %}<b>text</b>{% endif %} But due to the toHtml() function in src/dom_components/model/ComponentTextNode.js this gets converted into {% if variable == &quote;value&quote; %}<b>text</b>{% endif %} Is there an eas...

artf

Yeah sure, you can extend the textnode component and use your toHTML function

#2866July 1, 2020by sanjib001 answer
0 reactions

[QUESTION] How to remove empty space at end of the page for free dragging?

Hello @artf , For free dragging, we are using dragMode: 'translate'. When we're moving all components from bottom to top position, it remains some blank space at end of the page and browser shows scroll, although we don't have any content at end of the page. See screenshot - For better understanding, you can watch the...

artf

This is how translate mode works, the absolute mode doesn't leave any empty space

#2865July 1, 2020by ghost3 answers
4 reactions

[QUESTION] enable 'view components' button on panel by default

this button is currently off by default. so you have to turn it on every time, which is not obvious to everyone. how do you make it active right away?

mcottret

Hi @Enmaboya ! Looking at the default Panels configuration, it should be active by default. If you have a custom panels configuration, you need to add the active: true property to the button's configuration (like here). Alternatively, you...

ghost

@mcottret thank you so much!

sdchamoli

In Angular myPlugin: any; this.myPlugin = editor => { editor.Panels.addPanel({ id: 'basic-actions', el: '.panel__basic-actions', buttons: [ { id: 'visibility', active: true, // active by default className: 'btn-toggle-borders', label: '<u>...

#2864July 1, 2020by fcnyp1 answer
0 reactions

[QUESTION] Require trait, check status

I have a project that requires a form, currently using the form plugin, and each element of the form requires a name. While this is a trait, is it possible to require a trait and check all nodes to determine if they meet their requirement? Following my example one would create a form where the nodes have a required tr...

artf

What you see in the documentation it's just about the required attribute (eg. <input ... required/>), so nothing blocks the user from storing the template. In your case, you can create a kind of check before storing which queries all the f...

#2862June 29, 2020by Lerdouille3 answers
0 reactions

[QUESTION] Custom type unrecognized on import

Hi, i succeed to create a new type containing a clickable image. But unfortunaltely, the new custom type isn't recognize by the HTML parser on import. Here is my new type source code : editor.DomComponents.addType('imagelink', { isComponent: el => { if (el.tagName === 'DIV' && (typeof el.classList !== 'undefined' && e...

Lerdouille

Hi, for the record, when i try to change the isComponent return, with a type defined in a plugin like this : isComponent: el => { if (el.tagName === 'DIV' && (typeof el.classList !== 'undefined' && el.classList.contains('imagelink-class'))...

Lerdouille

Another curiosity which might be logical... If i tried to put a exotic isComponent function like this : if (el.tagName === 'ABCDE') { return { type: 'imagelink' }; } And when i try to import this html text : <abcde>test</abcde> The plugin...

artf

I think you're missing the point of components. You have a custom one (imagelink) and then an inner one (img), so the editor shows it, so I see no issues here. To see the traits from the custom component you have to select it and it has no...

#2858June 26, 2020by hellocaio2 answers
3 reactions

[QUESTION] After installing grapesjs-style-bg plugin, how do I add it to StyleManager?

Newbie question here, I added the plugin grapesjs-style-bg to the stack, now how to I show it in my StyleManager? I reset all the sectors from the StyleManager on initialization, and then I add them one by one using styleManager.addSector("id", {...}).

hellocaio

@pooriamo, thanks man! Life saver! It works great! :))) Thanks for the cheatssheet too, lots of goodies in there!

pooriamo

You can cheat from here: https://github.com/artf/grapesjs/blob/gh-pages/demo.html#L1127 You must add background-bg to the buildProps array and then config it in properties, the type must be bg:

#2855June 25, 2020by i3laddin3 answers
0 reactions

reload prev data for custome react component plugin after reload page

Hello @artf i am working with that awesome tool for long time i integrate it with react , and create a react plugin component for it , and create custom trait to get data from api and render it throw the plugin , i setup a local storage and also make a button to save all data in the local storage and db but i have a l...

artf

For sure you didn't configure correctly the Storage Manager Please read carefully this guide https://grapesjs.com/docs/modules/Storage.html

i3laddin

thanks @artf for answer , i know how much time is important to you , but sorry for that , i configure it correctly , also i am get 200 for post request , also i get all of html and components and css for load request , but i have a little...

artf

How did you define that custom component?

#2854June 24, 2020by cartifon2 answers
1 reactions

[QUESTION] - add multiples CSS attributes with one button on StyleManager sidebar

Hey man, once again, great work on the GrapesJS, you are getting tons of things done, it is incredible! So, my question is, how can I add multiples CSS properties with just one button on the StyleManager? What I want to add is a display: flex; justify-content: center, the way we have right now that I found on the docu...

Ju99ernaut

At the moment I don't think you can do that with the StyleManager it may be easier to use traits

artf

Yeah, unfortunately, @Ju99ernaut is right! Probably soon I'll start working on the StyleManager API which would allow a similar level of customization we have in Traits