GrapesJS Issues

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

644 issues found

๐Ÿ” components
#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>...

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

#2856June 25, 2020by mcottret2 answers
1 reactions

[Feature Request]: Expose options parameter to `setStyle` & `setComponents`

Hello again ! Our team has recently been trying to update GrapesJS' canvas programmatically without accidentally triggering an update event. If our understanding is correct, this would mean allowing a call to setStyle or setComponents not to trigger an update event, regardless of the current stepsBeforeSave & changesC...

artf

Yeah, it actually might make sense having options in these methods, so a PR would be welcome.

mcottret

Great ! #2872 opened.

#2844June 20, 2020by akashdesale981 answer
0 reactions

[BUG] If we give "<input data-gjs-type="myInput" type="text" required/>" this html string to setComponents, it sets it like "<input data-gjs-type="myInput" type="text" required=""/>" in code manager

editor.setComponents("html stiring"), method which takes html string as an input and sets that code in the html section in the Code Manager if we pass ,<input data-gjs-type="myInput" type="text" required/>" to editor.setComponents, then its output will be "<input data-gjs-type="myInput" type="text" required=""/> If yo...

artf

For now, you can avoid it only by adding the Component Definition in this way but I'll update the HTML parser in the next release to handle this properly

#2840June 19, 2020by tonypartridge1 answer
2 reactions

Body background color/image not saving?

When I set the color or background image on the body it does not appear to save within the html/css/components. Is there a trick to get the background canvas to save? See attached for example. <img width="1345" alt="Screenshot 2020-06-19 at 08 01 56" src="https://user-images.githubusercontent.com/1400982/85105890-2e52...

tonypartridge

avoidInlineStyles: 1 resolves it.

#2839June 19, 2020by akashdesale981 answer
0 reactions

[Question] I added one component named template in the blocks but when i try to drag another components inside this template component ,it will be dragged but after saving it removes all the components inside it. How to avoid this?

This is code of template component: I debugged it, so i got that : setComponents method in the dom_components clearing it ...but not getting why it is removing? setComponents calls clear method which is responsible for removing elements inside it I commented this so it was working fine and persisted the components ins...

artf

<template> tag should be treated differently #244

#2836June 16, 2020by RJCAM1 answer
1 reactions

[BUG]: Unable to add class when adding Dom Component

GrapesJS Version used: 0.16.12 (current) Just a strange behavior, I can add all the attributes I want when adding component directly inside canvas using dom components add function (like code below) but the editor always remove the class. The class is only added if we create the component first and then assign a class...

artf

Yeah, you have to use classes property, but I agree that is confusing (that because classes are treated a bit differently), so I'll try to make the initialization possible also with attributes.class value

#2831June 15, 2020by mustahsanmustafa2 answers
1 reactions

[BUG] Text components don't behave correctly after creating custom components

Hi artf, After creating custom components, the text component does not behave like before. It removes all the naked nodes after changing some code in import modal. e.g After editing something in import modal it gets change to: As you can see it removed the Naked text node i.e Insert your text. It should be noted that...

artf

You're mixing the old API with the new one for the custom component definition. With model: defaultModel.extend({ was required an inner static isComponent (you're using one outside, like in the new API) and without it, you're breaking the...

mustahsanmustafa

UPDATE: If i just extend my custom components from textnode instead of default, then the issue gets resolved somehow: but it will be better if the issue is resolved at default as well. cheers

#2827June 12, 2020by AndiswamyDev1 answer
0 reactions

Couldn't make text editable after running the "editor.getSelected().view.disableEditing()" command? Any alternate command to become editable text?

Hi @artf , I'm currently working on customizing link property, So in the mid of my flow, I need to restrict the selected text to become uneditable(to get exact list of text components), by doing so , I couldn't perform further RTE actions (to unlink). I followed our previoues Grapesjs guides and docs regarding Links,...

artf

Just use the editable property (eg. editor.getSelected().set('editable', false))

#2825June 11, 2020by Leozinho03 answers
2 reactions

How do I add my classes CSS file when using components?

I have this component: editor.BlockManager.add('rodape', { label: '3 Colunas', content: { tagName: 'div', draggable: true, attributes: { class: 'row' }, style: { 'display': 'flex', 'justify-content': 'flex-start', 'align-items': 'stretch', 'flex-wrap': 'nowrap', 'padding': '10px', }, content: 'lala' } }); I want to us...

RJCAM

Hi, @Leozinho0 You can do it like this:

RJCAM

Actually, the code I give to you works, to see what I mean, try this:Drop custom created component into canvas, as you said it won't load the css ".row" styleNow drop any column block inside the canvas, and now you see the ".row" css is lo...

Leozinho0

Hi. Thank you for answering. It doesn't work. If you check https://grapesjs.com/demo.html when you add a component (Ex.: 3 columns) and click to export the html you will see that it loads the .row and .cell classes.