[QUESTION] Best way to listen to changes on the final HTML?
Question
Hi,
I just had a quick question because I could not figure out how to do it or did not find an issue related to it.
I am just trying to call a function when any changes is done on the canvas.
For example, I am adding a block or removing a block. I am changing the attributes using the style manager. Or drag and dropping the blocks within the canvas. Or even updating the traits.
Is there a global event I can listen to it trigger my function?
I am not talking about any actual changes in the Canvas itself but changes that apply to the final HTML when I call the method editor.getHtml().
Any help or guidance is appreciated, thanks!
Update:
For the moment I figured out I could use the storage manager to achieve this, by doing:
storageManager: { type: 'onChange'; }
and
editor.on('storage:start', callback);
If there is a simpler solution without having to do it this way, I am open to suggestions.
Thanks!
Answers (3)
@simplecommerce , try also this, maybe fit better for you
editor.on('change:changesCount', e => {
// Change!
});
The way you did is the simplest way to achieve that in my opinion.
What do you want to achieve at the end?
You could use something like editor.on('all', () => //your code here ); but this is not practical at all. there are many events being triggered by GrapesJS and I don't think this will suit your needs.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #897
How to: find some component at canvas, on event "component:add"
Hi everyone, let say i've added block <form> on canvas. When i adding next <form> (second time) , need to check: if weather this component...
Issue #1707
Find images links in the editor
I am trying to integrate GrapesJs in reactJs. Can you please help me out with the below question w.r.t GrapesJs-React, • Is there a way to...
Issue #957
[Question] Add custom attributes (data-) to assets/images on Upload/Selection
Hi, I am trying my best to find the proper/best way to do this, but I need to attach two custom HTML5 data tags to an image once it is sele...
Issue #1912
[QUESTION] Custom component default children
Hi, I am trying to understand how I can achieve the following.Create a component with a default content as children.Create a block to add t...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.