GrapesJS Issues

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

466 issues found

πŸ” components
#3448May 10, 2021by rcloss2 answers
0 reactions

Applying custom class to component doesn't seem to be working

I'm adding a class on a component when certain conditions aren't met, in this case when there's no href set. I viewed the source and see the "nolink" class in the source but it's not setting the background color to red and I'm not seeing it when inspecting the element, this is how I'm trying to add it, but when I do c...

artf

I also tried editor.CssComposer.setRule('.nolink', {'background-color':'red'}); but that didn't seem to work either setRule is the right API to use and it works, but it creates only the rule, you have also to add the class to the component...

GJSBlock

Thanks for reporting this, @rcloss. Thanks for sharing your report about applying custom class to component doesn't seem to be working. To help the team investigate and prioritize this: Please provide: A minimal reproducible example (CodeS...

#3447May 10, 2021by lbmir4 answers
2 reactions

Javascripts are not working due to encoding issue

1 - I copied Typed text components code instead of demo HTML code; 2 - And added allowScripts: 1; You can see example here: http://bashworld.ru/demo.html press to View code and we see many encoded characters in JS. How can I fix this issue? I need to decode all &, <, >, ' characters, please see screenshow below

Ju99ernaut

It's not recommended to use allowScripts: 1, anyways in your case why not just drag in the typed block, but if you have to include it in your from element use:

Ju99ernaut

You should setup your storage correctly https://grapesjs.com/docs/modules/Storage.html#basic-configuration

lbmir

@artf Can you help please?

#3446May 9, 2021by Spectrevuln-sketch4 answers
0 reactions

Cannot Store Data Unexpected token '-'

Please Help Me, I Want To Store gjs data to mysql but i cannot get any data from front end to back end here my code: const editor = grapesjs.init({ container: "#editor", storageManager: { type: 'remote', params: {}, // For custom values on requests // your SERVER endpoints urlStore: 'http://example.com/store-webpage',...

Ju99ernaut

Variable names can't contain '-', so this syntax is invalid:

Spectrevuln-sketch

please help i want to store my the template to mysql how i to do it?

Ju99ernaut

Unfortunately this may be beyond the scope of grapesjs but some things to note Also since it looks like you're removing the gjs- prefix during storage, you must also add it back during loading. A similar approach is used here https://githu...

#3435May 6, 2021by anlumo1 answer
0 reactions

Scrollable onStart/onEnd/updateTarget not Overridable

Version: 0.17.3 Are you able to reproduce the bug from the demo?[ ] Yes[X] No What is the expected behavior? Being able to override onStart, onEnd, and updateTarget in a component's model.default.scrollable, as detailed in the documentation. Describe the bug detailed I have created a component that extends ComponentIm...

GJSBlock

Thanks for reporting this, @anlumo. The issue with Scrollable onStart/onEnd/updateTarget not Overridable appears to be a race condition or state management timing problem. This typically happens when component lifecycle events and DOM modi...

#3422Apr 29, 2021by Asifislam1104 answers
0 reactions

How we can remove default text content from text component 'Insert your text here' ?

I want to remove default text from text component just like placeholder. every time when we drag text component we need to remove default text manually.

theSC0RP

Hey @Asifislam110, I don't know if this is the best solution but this was one that I could come up with.

Asifislam110

@theSC0RP it will remove the text from all the text component when editor get loaded. When inserting a text box into Editor the text "Insert your text here" should automatically disappear when user goes to start typing. Currently, you have...

theSC0RP

Ohh my bad! I thought you didn't want the text component to have any content when dropped in the canvas. For your doubt, I guess you can do something like when a component is selected check if it's a text component and in the view, you wil...

#3421Apr 29, 2021by ltenti-eventboost4 answers
2 reactions

How to remove class selector css rule

I'm using componentFirst set to true to let my users apply needed style to component they selected. Selecting a component which is applied a css class specific to the component type, and clicking "Sync" button causes the selector change from the component ID to the relevant css class. Now I can't find a way to go back...

ltenti-eventboost

It makes sense, now I just have to find a way to add this feature to my builder. Thank you @Ju99ernaut!

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

artf

Hi @ltenti-eventboost I'm not sure If I understand exactly where is your issue. When you're editing with componentFirst enabled, the editor applies style changes on a component-specific CSS rule (eg. #cmp-id { color: red }). When you hit t...

#3420Apr 28, 2021by sanchit362 answers
0 reactions

How to implement LocalStorage in reactjs project??

I am trying to implement localstorage in reactjs app, it is for some reason not storing data in localstorage

artf

The local storageManager does all the job for you, so you don't need to perform all those manual stuff you're doing now. So leave the storageManager option and remove the rest. ps. be careful with useEffect, add an empty array as dependenc...

GJSBlock

Thanks for reporting this, @sanchit36. Great question about [URGENT!!! QUESTION]: How to implement LocalStorage in reactjs project??. The recommended approach with StyleManager is to use the event-driven API. Start here: Check the GrapesJS...

#3417Apr 27, 2021by NagarRahul2 answers
1 reactions

How Map component works? How we can create weather components and render it?

Could you please expain how map components are rendered after draged? How we can create a new component for weather and how it will render like a map component? @artf

theSC0RP

You can take a look at the following (if you haven't) to understand how the map component works:Map Component ModelMap Component View

GJSBlock

Thanks for reporting this, @NagarRahul. Great question about FEAT: How Map component works? How we can create weather components and render it?. The recommended approach with Components is to use the event-driven API. Start here: Check the...

#3416Apr 27, 2021by ghost2 answers
0 reactions

0.15.10 - setAttribute - is not a valid attribute name

Hello! I know this is a bug reported here #2029 but now I can not update from 0.15.10 to the version that has the solution. Would you know any workaround for this issue at the moment that I am setting the component? I am using VueJS with GrapesJS. Here is how I am trying to set the component. this.grapeEditor.setCompo...

artf

No sorry, can't help with such an old version. Why you can't update??

GJSBlock

Thanks for reporting this, @ghost. The issue with 0.15.10 - setAttribute - is not a valid attribute name appears to be a race condition or state management timing problem. This typically happens when component lifecycle events and DOM modi...

#3414Apr 26, 2021by sidh013 answers
1 reactions

Component model is not reset when create new drag

When dragging a component from right panel component model doesn't set to default value but has value of previously added component

sidh01

I have solved this the problem was when we set model property then I need to use deep clone for array or object

artf

Hi @sidh01 it's definitely something on your side, we can try to help you if you're able to create a reproducible demo.

GJSBlock

Thanks for reporting this, @sidh01. Thanks for sharing your report about Component model is not reset when create new drag. To help the team investigate and prioritize this: Please provide: A minimal reproducible example (CodeSandbox/JSFid...

Browse all topics