GrapesJS Issues

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

85 issues found

πŸ” help wanted
#2289Sep 25, 2019by JCKodel3 answers
3 reactions

Allow to import javascript modules

When using Ionic StencilJS, the components are imported using the new module support: On {canvas: scripts: []} I can only load external scripts by their url. To cover such case, we could import modules as this: The final result inside canvas would be: Notice that this would cover also the case when we want to use inte...

artf

Nice I like it, for anyone interested in making a PR the code to update is here: https://github.com/artf/grapesjs/blob/aee18dcf0602e5d56e7670deb8d4ffbf31c73008/src/canvas/view/CanvasView.js#L140-L161

devtechk

Hi can I start from yours code to init grapesjs not in the html file but in a separated js file? Thank you

rywilson28

@artf it looks like this feature has been implemented. There is a minor issue where type will default to 'text/javascript'. For HTML 5 it should be omitted but should not cause any issues if there. Should this issue be closed?

#2207Aug 20, 2019by niisar3 answers
0 reactions

Can't drag component if there is some space on top/left with Mode Absolute

Given the following code example... Results in no ability to drag and drop elements to correct position using drag icon on the panel. See Fiddle for demonstration... https://jsfiddle.net/niisar/zc51gtnv/

pouyamiralayi

this is only for the drag icon, right? the manual dragging is fine. using the drag icon, it resets the position of the element from the top as it seems.

niisar

this is only for the drag icon, right? the manual dragging is fine.using the drag icon, it resets the position of the element from the top as it seems. Yes this is only for drag icon.

artf

Yeah the problem here is the different Event object based on the context. When you trigger the drag on the component itself the Event is in the context of the iframe (because the clicked element is in iframe) but component's buttons are ou...

#2196Aug 15, 2019by devgru3 answers
3 reactions

Link element selection shows no toolbar

Steps to reproduce: add Text, select a word, click on Link icon in RTE panel, select a Link. Expected behaviour: when I select Link I expect it to display toolbar (with 'select parent' button) alongside its badge. Actual behaviour: If a link was in startup HTML, Link is properly initialised and selecting it results in...

simplecommerce

@Abhisheknanda1344463 Hi @artf @simplecommerce @devgru Any update on this. Is there any way to fix this manually? Thanks I am not sure if it will work for you but this is what I did to work around it.

Abhisheknanda1344463

@simplecommerce Thank you Man. It's worked. Thanks

artf

Closing the issue as it seems to be fixed.

#2189Aug 12, 2019by rahuloftheramaneffect3 answers
2 reactions

How to add "Ordered/Unordered List" option in rte/custom block

Hi I'm trying to create an ordered list with grapesjs. I tried adding the following to the rte: And this works if my page is pre-filled with html when the editor is initialized, like below: Prefilled Editor: Create Ordered List: If, however, I drop a new block into the canvas, and then press the ordered list button, I...

thomas1204

From the above comments, I can now add ordered and unordered list. Is there any way to update existing ordered and unordered List ? @artf @rahuloftheramaneffect

artf

Can you create a reproducible demo, please? That error without a stack trace is useless(Optionally) we can use the tab key to indent the lists? You should definitely do it by yourself or rely on something like CKEditor for more advanced te...

rahuloftheramaneffect

Hey! Thanks for responding so quickly.Can you create a reproducible demo, please? That error without a stack trace is useless Here is a zip file containing a stripped down version of my editor page. Demo.zip It includes a bunch of css and...

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

#2148Jul 18, 2019by makkaronis4e3 answers
0 reactions

IE11 (Unable to get property 'style' of undefined)

Hi! Just faced the same issue: https://github.com/artf/grapesjs/issues/1295#issuecomment-410046832 While click on one of this buttons this.getPropertiesEl().style.display="none" Unable to get property 'style' of undefined or null reference Did anyone manage to fix it?

zgeist

I have same issue How can I fix it?

senchden

I can confirm that in web page demo v0.15.8 it is not possible to set a style to an element. IE11 print out this to the console when trying to set a style via the Style Manager:

Alkotronikk

For me the issue was with ParentNode.children and I had no polyfill.

#2080Jun 17, 2019by Aamir37532 answers
0 reactions

Audio Tag is not selectable or editable

How to make audio component work properly (selectable,editable) like other components (image).

artf

Good question, the audio element is quite particular so it'd definitely require a custom component, probably following the ComponentVideo (and its custom view) For sure you could add it by yourself but I think it might be good handling it...

mohd7469

@artf can you give an easy snippet that shows a normal working demo of audio element cuz I tried to define custom component type for audio element but it does not seems to work and it is either not selectable or editable

#2068Jun 6, 2019by ssabrewolf3 answers
0 reactions

GrapesJs gradient plugin not working anymore

Hello GrapesJs team After updating the grapesjs version form 14.0.59 i noticed the gradient plugin stopped to work, i also checked the gradient demo page and i noticed the same behavior here https://codepen.io/artf/pen/bYwdQG Thanks in advance

ssabrewolf

hi @artf i noticed you added the help wanted tag, i could try but could you give some tips or hypothesis about what could be the reason to not start from zero wondering in the dark, of course im asking because you seem to be the author of...

artf

@ssabrewolf yeah I'm the author of the gradient plugin but to be honest I've no idea what is happened, definitely a regression after some update in the Style Manager module. What I can say, is working fine with the v0.14.50

alikabeer32

It's absurd but I find that if you type 'decoration' instead of Decoration, the plugin works! In the demo and in my code as well.

#2044May 29, 2019by eduardonunesp3 answers
1 reactions

Npm start to develop on local server didn't work

Did the procedure to start the local server using dev branch as described on README, it worked on the console, but fails on chrome and the grapesjs don't load due to the following error

artf

I made a quick check and the reason seems to be the latest [email protected] I don't have time to investigate so I'll just freeze the currently used version

artf

Weird, never seen that before. It might be some dev dependency change in some minor release. Try to reinstall node_modules with exact dependency versions

verdverm

I'm having issues following the dev setup: Maybe a bundler issue? I am able to drop the min from grapes.min.js in the index.html file and it works. However, if I build the grapes.js output, then this error returns.

#2026May 21, 2019by alikabeer322 answers
1 reactions

Style manager css functions (for example transform: rotate(90deg)) accepts only one parameter

I would like to provide an option for the css function translate(x,y) but the addProperty parameter functionName accepts only one parameter as input. I tried to use translateX() and translateY() but they don't work simultaneously. I'd be grateful if someone could maybe tell me some other method to get the desired effe...

adamyarger

@alikabeer32 I ran into the same problem before, you have to set the defaults value for translateY and translateX since the transform property in css is shared across both translateX and translateY. for example grapes outputs transform: tr...

alikabeer32

Yes! It was the perfect solution. Thank you !

Browse all topics