Reading component related events
Question
The Editor API wiki lists a set of component-related events that can be listened to (e.g. component:add, component:update). There is however no mention of what sort of event objects the listener receives and how they are structured (what properties do they have and what values can they contain.)
When a component gets updated (for example its font-size is changed) we need to be able to catch the event, process it and react to it. Can you give us an example of how to determine what sort of changes occured on the component? Do changes happen every time the component:update event is fired (this event gets triggered a lot of times, why is that)? Does every event receive the component model as mentioned near the component:add documentation? If not: what is the structure of the event objects?
Thanks in advance for any help :+1:
Answers (3)
@artf hey thanks for your answer. I was however looking for a more general example of determining if changes happened and what they were - for example something like this:
editor.on('component:update', model => {
if (model.isChanged()) {
//....
}
if (model.isChanged('style:font-size')) {
//....
}
var changes = model.getChanges();
});
We need to track changes to components in a project so we need something more general.
Could you also possibly explain why so many component:update events are fired when I make even minor changes to components (almost always more than 10 events are fired for what seems like various components)?
Thanks @ppisecky for pointing this out, I updated the source, but basiclly any component-related event just receives the triggered model.
About your font-size case, you can set up this listener
editor.on('component:styleUpdate:font-size', model =>
console.log('Font size: ', model.getStyle()['font-size'])
);
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #792
Script property using function don't work with blocks
In Components & JS docs there's this example: This works perfectly. But I couldn't use a function instead of a string in script, as is said...
Issue #525
local2 example for storage not working
Using code provided in docs. https://github.com/artf/grapesjs/wiki/API-Storage-Manager in "add" examples. I am trying to create my own stor...
Issue #518
change only component body not whole page body.
Hello @artf As we discussed in issue #374. setComponents will set the body and replace all the contents that are present on the page with a...
Issue #687
After update the component attributes using editor.on('component:add',function(){}); The blue box item is not correct.
After update the component attributes using editor.on('component:add',function(){}); The blue box item(it mean the action icon) is not corr...
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.