GrapesJS Issues

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

23 issues found

πŸ” inactive
#2972Aug 25, 2020by kuhelbeher3 answers
0 reactions

Disable scripts on canvas

Hello, first of all thanks for a great tool. On my project i hit the problem where I need to disable scripts inside the editor. I found 2 similar issues with this problem - https://github.com/artf/grapesjs/issues/2046 https://github.com/artf/grapesjs/issues/2814. So the problem is quite common and maybe it's better to...

RJCAM

Hi @kuhelbeher I'm still trying to achieve that too, but here's a tip that can help us to achieve it. I'll post here if I figure out a way. See this issue #2772

kuhelbeher

@RJCAM thanks for tip, I tried that, but problem with this approach is that it disables script for component, not the whole template.

artf

Once the editor and its components are loaded it's hard to think about disabling JS, think about a component with custom scripts that binds events all around the DOM (maybe even using some external plugin). The only way it could be possibl...

#2746Apr 29, 2020by NorthstarTech3 answers
2 reactions

Mouse hovering overlaping on text toolbar ckeditor/richtext editor

When ckeditor/richtext toolbar is open. Mouse hovering on elements, Border line overlapping the toolbar. borders overlaping.

adamwpe

Can you provide an example? Ideally using https://jsfiddle.net/szLp8h4n

bgrand-ch

Hello, For future questions or technical issues, which aren't bugs, GitHub's Discussions tab is the place to be. Don't forget to close this issue if it is resolved or write a new detailed message in Discussions -> Q&A category (and close t...

sanjaysamcom

How to resolve one section to another section drag-drop overlapping issue?

#2493Jan 7, 2020by andrewryan19062 answers
0 reactions

Invalid array length when dragging component onto canvas

Not sure why, But all of a sudden, when I start dragging components onto a canvas, I get this: This seems to happen when I edit a template, save it, and reload it. It also seems to happen when I try to drag a new component to the LAST element of the page; if I try to drag and element inside of a DIV container inside t...

andrewryan1906

Here's another clue... once the canvas "breaks" (which I can reliable make happen by refreshing the page and forcing a load... this behavior doesn't happen on new templates, only when the template is loaded from my custom storage, but I ve...

andrewryan1906

OK, I managed to stick grapes.js into my Angular project and reference it instead of the minified version, so I could get more insight into what is going on. The problem seems to be in Sorter.js. The findPosition method is tasked with figu...

#2383Nov 6, 2019by smik33 answers
3 reactions

Custom component not pulling through style on first add.

Fiddle replicating the issue: https://jsfiddle.net/gd8mo3e4/1/ I have a custom component for creating a gallery of pdf documents. There's a custom asset manager that opens when the block is dropped into the editor, to allow you to choose the pdf which then changes the thumbnail. The issue that i'm having is that on a...

smik3

The thumbnail/image which it puts into the editor should be scaling to fit the container. I'm seeing it at original size on first-load, all subsequent block adds correctly fit whichever column they are dropped into. If you look at the expo...

smik3

A couple of screenshots demonstrating the behaviour I'm seeing... <img width="1021" alt="Screen Shot 2019-11-06 at 11 32 16" src="https://user-images.githubusercontent.com/19346508/68294968-394ba600-0089-11ea-941a-e441d3469c6f.png"> <img w...

artf

i guess this is related to this one and probably this one @artf mmm not really Changing modelThumbElement.setAttributes({"data-gallery":fileName}); to use addAttributes seems to fix it, but I'm not sure what is really happening (I'd expect...

#2337Oct 17, 2019by navewi3 answers
0 reactions

Deleting default styles does not work

Hello, i'm trying to delete some of the default styles of the blocks. I wrote everything I changed in a plugin. I used this function to update for example the Text Components style-defaults: editor.DomComponents.addType(.....) seen here: https://grapesjs.com/docs/modules/Components.html#update-component-type Am I gett...

pouyamiralayi

Hi there! have you tried using setStyle ? cheers.

artf

I'd expect something like this to work (update style-default) Be sure to load your plugin after the mjml one

navewi

Hello @artf, thanks for your reply. this is the exact same code, that i tried out. This one works if I use "style" instead of "style-default".

#2214Aug 23, 2019by Firefox20051 answer
0 reactions

SVG Element is not a real SVGElement

Behavior I use an external Javascript code that replaces some SVG elements dynamically based on their attributes. The Javascript code first checks for the type of the element to validate, that it is an SVGElement like this: document.querySelector('#someId') instanceof SVGElement The code returns True in Firefox but Fa...

artf

The code returns True in Firefox but False in Safari and Chrome although I can verify in the Chrome Properties tab, that it is indeed of type SVGElement. Weird, seems like a Chromium issue...

#2211Aug 22, 2019by abozhinov3 answers
0 reactions

How to set style for pseudo elements (:after and :before)

Hi, I add STATE in style manager :before and :after but all the styles are applied to the component.

artf

Do you mean during the editing? Do you see it good if you deselect the component?

abozhinov

Yes during the editing. My idea was to implement the pseudo elements. When you select component to select state like hover, but to be :after or :before. The problem is that I need to set content: '' in the css rule and all the styles are a...

artf

Ok but is it correct once you deselect the component?

#2185Aug 7, 2019by vegadesign1 answer
1 reactions

SVG icons instead of PNG

Hello. There are some PNG icons in the application:flex-just-start.pngflex-al-end.pngflex-just-sp-bet.pngflex-dir-col.pngflex-just-sp-ar.pngflex-al-start.pngflex-dir-row.pngflex-just-end.pngflex-just-sp-cent.pngflex-dir-col-rev.pngflex-al-str.pngflex-al-center.pngflex-dir-row-rev.png I've created the same but in SVG f...

artf

Wow, thank you very much @vegadesign really appreciated. We actually use those only for the demo (gh-pages branch), here: https://github.com/artf/grapesjs/blob/be39c6baf55f4e644b6bc8bbdd71ead71723dd6b/demo.html#L53-L91 I'll try to replace...

#2154Jul 20, 2019by adelliinaa3 answers
8 reactions

Custom Component Integration

Hello! I want to integrate a custom component with GrapesJS, using Angular CLI 7, but it doesn’t render. My component is built on top of another open-source component. When I want to include it in any Angular project, I would just import the dependencies/libraries in the typescript files and the component itself (e.g....

artf

Ok, but what will you do with the output (Angular components) of the editor? I mean, how you will use it at the end? Anyway, I see two different approaches to this kind of situation:Create a custom render for each component (the exact thin...

artf

@adelliinaa let's start from a simple question because I don't understand, what kind of editor are you trying to create? A builder for Angular components?!?

adelliinaa

I want to create a form builder similar to the one which you created with the MJML components, but using Angular CLI instead of JS. And yes, the customed components which I want to integrate within GrapesJS are built in Angular as well.

#2113Jul 3, 2019by shvhhNo answers
0 reactions

FEATURE REQUEST for custom propert

there should be a feature to switch toolbar from right to leftI can't find any option to add a property like action in case of a form, name in case of a form element & on click action(if possible)

Browse all topics