GrapesJS Issues

Search parsed GitHub issues, see highlighted answers, and open the original discussion when needed.

3464 issues found

#3173December 8, 2020by niveth093 answers
2 reactions

How to remove the eye-slash button in preview mode?

Hi @artf ! I have created a web builder using GrapesJS. I want to remove the eye-slash button in preview mode and replace it with the back button. How to do it? Kindly please help me.

robsonsobral

> I'd suggest extending the original Preview commandThank you for reply @artf . Is there any documentation or sample code about extending an existing command? https://grapesjs.com/docs/modules/Commands.html#extending

collindutter

@niveth09 here is the code for extending the preview command without the eye button:

artf

I'd suggest extending the original Preview command

#3172December 8, 2020by theSC0RP1 answer
0 reactions

QUESTION: How to track the updates of components down the tree?

Hi, @artf. I have a few questions regarding component lifecycle hooks. In my application, I want to track the updates to all the children of a component and their children, and so on. How should I do it?Updates on immediate children are tracked by the model.updated() hook but I need to track the updates to a component...

artf

I'd create a specific listener on the parent then I'd trigger that event from the child

#3171December 7, 2020by skbhagat403 answers
0 reactions

Adding / Updating href trait does not add `<a></a>` wrapper to image.

Expected Behavior - when I update href trait value, the image should be wrapped inside a with href value set. i.e. <a href="google.com"><img src="/></a> Current behavior = no change is reflected Here's code for adding trait The above function is triggered on double click, Please help me how do I add href to image dyna...

skbhagat40

It's not working, even if I do `selectedElement.getTrait('href').set({value: 'fb.com', target: '_blank'})

skbhagat40

I think the component view is not getting updated, if I repeat the action, it is rendering a tag with previous value.

skbhagat40

It works if I update href in the attributes

#3170December 7, 2020by ThetripGr2 answers
0 reactions

Add class name from traits

Hello, what i am trying to achieve is to have the text component extended by assigning an extra trait named Alignment and deciding through the trait the kind of alignment i wish to do, after that no css should be applied but the appropriate class name should be given to the component. Is there an example of how i coul...

ThetripGr

So i got it working after some more tries, i will try to explain how i got it to work. When you define the trait you can declare a name. When you select option A from the dropdown selection you can track this change on init(), as this.on('...

artf

sry for the formatting but i do not know how to paste formatted code yet :P https://guides.github.com/features/mastering-markdown/#GitHub-flavored-markdown

#3169December 7, 2020by mrobertshaw2 answers
1 reactions

BUG:

Hi There I am trying to implement an editor where certain sections of the page are editable / droppable etc (i.e a mixed page where some elements are dynamic and others aren't). I am having a lot of success by using the data-gjs attributes to block this behaviour generally on the static elements however I don't seem t...

mrobertshaw

This is immensely helpful. Thank you for responding so quickly and for your fantastic, clever and well designed product which is a massive help to our product.

artf

Hi @mrobertshaw the main element is intended as the editor container and not the wrapper. You have to use this option if you need to edit the wrapper's props:

#3168December 6, 2020by oleteacher2 answers
0 reactions

FEAT: Download / Export images - Love to use in classroom project

What are you trying to add to GrapesJS? Ability to export images / images folder in zip download Describe your feature request detailed GrapeJS would be an excellent tool in which grade school children use to create their own about me page. Not sure how difficult it would be to add ability to include image folder in z...

artf

Hi @oleteacher doing something like that, is not entirely possible due to security restrictions in browsers (eg. when the image is downloaded from another domain). You would need a server process that generates images for you.

oleteacher

Yes, we have a local server for the classroom. We just do not have our own IT support to help with things like this, very small school Sorry to have bothered you.

#3166December 1, 2020by nanaya13 answers
0 reactions

BUG: Problem with copy and paste a node

*Version:0.16.27 Are you able to reproduce the bug from the demo? [ ] Yes [ ] No What is the expected behavior? In the right panel and canvas, the pasted node should be after the copied node. What is the current behavior? I copy a node. In the views-container(right panel), the pasted node is after the copied node. But...

artf

I've tried locally but the node is placed correctly. Are you able to create a live demo, please?

nanaya1

Sorry, I did not elaborate on the scenario where this error occurred. The components that come with grapesjs do not produce this error, because they don‘t have spaces,carriage returns or tabs. I found this problem while customizing compone...

nanaya1

@artf I accidentally closed the issue.

#3164November 30, 2020by mcottret1 answer
1 reactions

FEAT: `grapesjs-plugin-ckeditor` version

Hi @artf ! A while ago you've merged the following PRs:https://github.com/artf/grapesjs-plugin-ckeditor/pull/39https://github.com/artf/grapesjs/pull/2977 Related to this issue. Would it be possible to version grapesjs-plugin-ckeditor, so that the fix could be included ? Thanks in advance ! Is there an alternative at t...

artf

Done! Sorry, totally forgot about it 😬

#3163November 28, 2020by MarksEliel3 answers
2 reactions

FEAT: Shape Divider for GrapesJS

Is there grapedrop shape divider plugin for grapesjs? Is there a website that sells plugins for grapesjs?

MarksEliel

Hi, @MarksEliel Did you manage to get it? @Abhisheknanda1344463 Wow, I received a notification from github this morning, when I saw it was your link, thank you very much, it was amazing! congratulations! Do you want to develop other plugin...

Abhisheknanda1344463

https://www.npmjs.com/package/grapesjs-shape-divider FYI @artf

artf

Nope. Anyway, you just need to create a trait (as a prop) and update the component contents (eg. with the SVG of a shape divider) on its change

#3162November 27, 2020by sashapawlow7262 answers
0 reactions

Button switcher to editor.allowsCripts

Hello, @artf ! :) Maybe you can help with grapesjs. I have buttons which has own scripts(e.g. opening modal window by click). And if I set property allowScripts: 0 - I can to edit these buttons, but if editor.allowScripts == 1, buttons execute logic(e.g. opening modal window) and I can't to edit buttons in that case....

artf

I'd recommend creating a custom component for those buttons to handle the logic with scripts

sashapawlow726

@artf thank you very much! :+1: