I looked everywhere, including the issues section and tried a few things. But really unsure how to load dynamic content in my components always(not just when i export or save it via editor). I want to include a script in my grapejs component that always fetches content from web and updates the components. For example,...
stf1981
I think you search for component related javascript -> https://grapesjs.com/docs/modules/Components-js.html#component-related. This js code is embedded in the html output.
anuragk15
I think you search for component related javascript -> https://grapesjs.com/docs/modules/Components-js.html#component-related. This js code is embedded in the html output. So every time the component loads, it will load the data dynamicall...
stf1981
So every time the component loads, it will load the data dynamically via the JS script? YesAlso for the end users i just have to return the html+cas generated by the grapesjs right? Yes, the JS script from the component is in the html, see...
Version 0.17.19(grapesjs) Version 0.1.5(grapesjs-lory-slider) Version 1.0.6(grapesjs-tabs) Are you able to reproduce the bug from the demo? No What is the expected behavior? I should be able to traverse through different slides and tabs when clicked on previous or next buttons and tab names respectively. Describe the...
artf
Are you able to provide a reproducible demo, please?
TRIGGEREDcoder
Sorry @artf , I was facing this because of the script tag in the generated html which is of no use in angular component html. How can I use the html generated in angular files if the html contains script tag functions.
artf
@TRIGGEREDcoder if the main issue is solved I'm closing this one. Please open a new Discussion if you have questions
Hello. Is there possibility to create grapesjs instance, without generating whole editor? I had created custom components with async data and I need to create backend service in Node, which generates HTML output from stored components, populated with data from APIs. Now I am getting error:ReferenceError: window is not...
artf
I close it as a duplicate of https://github.com/artf/grapesjs/issues/3399
ClaudeCode
Thanks for reporting this, @milan-holes. The error error:ReferenceError: window is not defined occurs when Components attempts to access properties before the component lifecycle is fully initialized. This is a common race condition in Gra...
init() { this.listenTo(this.model,'change:components', this.handleComponentsChange); }, I develop a component, I try to listen the child components change, then I add above code to view init, but the function doesn't fired when add/remove component. how I can listen the components change in a component view? thanks
dm-siegel
I couldn't get this to work either. Error reading components() when setting the listenTo. The tag is empty (no contents inside) on init, so this makes sense. never mind... i was doing this in the init of the model instead of the view. this...
anlumo
The components collection doesn't change, that's why there's no event triggered. The storage backend is a Backbone collection, see here. You have to listen to its events, specifically add and remove.
artf
As already mentioned by Andreas, you have to add a listener to the collection.
I add domComponents: { storeWrapper: 1 }, when initialize the webeditor, to enable add background image to body. it works fine when use the local storageManager , but all the components lost when use the remote storageManager below is the data {"type":"wrapper","droppable":".container","attributes":{"id":"izmf"},"comp...
artf
Hi @jcsofts if the local storage works fine and your remote does not, that means you're probably doing something wrong on your endpoint side. I can't help you here without a reproducible example so I can only suggest following properly thi...
ClaudeCode
Thanks for reporting this, @jcsofts. Thanks for sharing your report about version 0.17.4 the components missing when try to add background image to body. To help the team investigate and prioritize this: Please provide: A minimal reproduci...
0.17.19 Are you able to reproduce the bug from the demo? YES What is the expected behavior? I had asked a question regarding iframe refresh (#3413). The proposed solution was working for that version (0.17.3) and after running the piece of code the iframe should refresh and the canvas should be seen with the component...
artf
I would need to check why he is still trying to remove the frame, but for now, just skip this line frameView.remove()
theSC0RP
@artf. Thanks. This works when done once. If I do some action like a click inside the canvas and then if I run frameWrapView.render(); once again, I got another error. The screenshot and a video of this error are attached below. <hr> https...
artf
I'll try to fix it in the next release, but for now, you have to unselect components before frameWrapView.render() and reselect them back post rendering
Is there a possibility to edit data attributes on components?
artf
Yes, please check the documentation and follow issue templates
ClaudeCode
Thanks for reporting this, @MarksEliel. Great question about How to edit data attributes. The recommended approach with Components is to use the event-driven API. Start here: Check the GrapesJS documentation for your specific module Look f...
I have some templates that were generated with v0.14.5. How can I "upgrade" them to the latest version? They have classes attached and I see that the newest version doesn't add classes to the elements anymore. Context: we use bespoke components and some defaults (e.g. draggable, resizable etc., style) have been change...
artf
They have classes attached and I see that the newest version doesn't add classes to the elements anymore. I'm not sure what you're talking about, classes should be imported as before.Context: we use bespoke components and some defaults (e....
acip
Hey, thanks for the quick response. Here is the template generated by v0.14.5 https://jsonblob.com/535ae06f-d4f6-11eb-8bc1-415e99da64cb This is how it looks https://ibb.co/Zz8qg2J We've changed some custom components' default attributes an...
acip
I've setup old vs new version for an existing template: https://grapesjs-templates-upgrade.ciprianamariei.repl.co/0.14.5-old-template.html https://grapesjs-templates-upgrade.ciprianamariei.repl.co/0.16.45-old-template.html
We want to add a custom toolbar to the image component to be shown at left side (similar to what we show for text component). Please let me know how can I do this. We want to add different custom toolbar for custom components too.
artf
Check the toolbar property in Components API reference and try to search for something related in Issues
ClaudeCode
Thanks for reporting this, @ankx06. Great question about How can I add the custom left toolbar for Image component similar to text. The recommended approach with Components is to use the event-driven API. Start here: Check the GrapesJS doc...
Hey there 👋 Love the editor! We're using traits to modify what classes a component has, but that feels a bit hacky as you have to redeclare ALL classnames for each trait selection Here a simple example: Each trait option has to have all the classes defined, because otherwise it will remove any existing classes. This...
krishnaeverestengineering
@deiga we are doing something like this.
artf
I'd attach the trait to some component property instead of the class attribute, and based on the value I'd use properly removeClass and addClass
ClaudeCode
Thanks for reporting this, @deiga. Great question about [QUESTION] What is the idiomatic way to append and remove classes from components?. The recommended approach with Components is to use the event-driven API. Start here: Check the Grap...