Issue #1864Opened March 6, 2019by simplecommerce3 reactions

[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)

a-bashtannikMarch 7, 20192 reactions

@simplecommerce , try also this, maybe fit better for you

editor.on('change:changesCount', e => {
// Change!
    });
arthuralmeidapMarch 6, 20191 reactions

The way you did is the simplest way to achieve that in my opinion.

arthuralmeidapMarch 6, 20190 reactions

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.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.