GrapesJS Issues

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

569 issues found

๐Ÿ” canvas
#2874July 3, 2020by acxvgalanov2 answers
0 reactions

[BUG] Toolbar overflows the canvas

Actual behavior: If the toolbar is placed on the element that is positioned near the bottom border, it may overflow the canvas and be partly hidden. It can be reproduced with the default toolbar: screenshot, but it's especially noticeable when the toolbar is customized and tall enough so some elements are inaccessible...

artf

Let me know if you're still working on the PR

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

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

#2849June 21, 2020by meyerco3 answers
1 reactions

[BUG] Using image url for background-image is not working properly

DescriptionOn our project for images assets we use url instead of base64 code .Expected behavior When setting a background-image to a control , it has to update the css of this control .The css have to be reflected on the canvas and the style panel .What happens instead ? If the image have spaces or parentheses on its...

meyerco

Hi @artf , #2975 Here is a PR to fix the issue . Please update me if its good enough . Thanks

artf

Thanks for the report, I'd appreciate a PR for this issue

meyerco

Can you direct me to a file , where background-image is set ?

#2848June 21, 2020by Aiyush-G1 answer
0 reactions

External CSS not loading in Canvas

Using CSS in Init results in blank screen: I want to link multiple css files so that on the actual webpage I can define classes e.g. Within Css file (example): And on webpage I would like to define text (e.g) to have class h6 or create a custom block where I can predefine classes. However, this doesn't work because th...

Aiyush-G

SOLVED: INCORRECT SYNTAX

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

#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

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

#2820June 10, 2020by Rubark1 answer
0 reactions

Dynamically attach CDN(external resources) to canvas head #grapesjs #attach #cdn #external #resources

Dear artf I'm trying to add feature to my application, for end user. It's a tool for - Dynamically adding CSS and JS CDN-s. Like in jsFiddle or Codepen, when we add external resources(css/js) CDN-s. That means, that after adding a link for js, or css, it will appear in Canvas iFrames head. Unfortunately I couldn't fin...

artf

You if need to save dynamic css/js inside the template you have to append them to the body (eg. editor.addComponents('<script src="...">..')) if you need them outside the template (which manages ONLY the body), like in the <head>, you can...

#2816June 8, 2020by scaneNo answers
0 reactions

[QUESTION]: Automatically apply style to components of similar type

Hello, I have written a custom GrapesJS component. So what I'm trying to achieve with this custom component is, if I place 2 components of the same type in the GrapesJS canvas and on editing the style of one component through style manager should automatically update the style of the other component. Is there a way to...

#2801May 25, 2020by fedd3 answers
1 reactions

[Questions] Enrich any component with the serverside if or foreach expressions (namely, MVEL)

I am researching how to make a template with server side expressions that will repeat a component (foreach) or completely remove it (if). My backend parses templates with mvel. What I am thinking is to add a couple of settings to all or some select elements. For example, to a <div> of a Cell, so it looks like this: <d...

Ju99ernaut

To surround an element take look at toHtml, you can search it in the issues for examples. In any case I don't think it's a good idea to replace the default component type, I'd suggest creating a new component that extends the default type...

fedd

The docs for components might be helpful I've written my code based on this article. It says,Updating component types is quite easy, let's see how: .... // The defaults property is handled differently // and will be merged with the old def...

artf

@fedd you can add your new traits in model.init function