Document Dirty Indicator
Question
I want to display document dirty indicator unless document is saved to database. I have custom button on editor to save html to db I tried below #551 but it only fires while loading html from db to canvas and it does not fire for any changes afterward.
editor.on('change:changesCount', () => { const editorModel = editor.getModel(); const changes = editorModel.get('changesCount'); if (changes) { //show dirty count }
Answers (3)
Tried this in the demo and works as expected
editor.on('change:changesCount', (model) => {
console.log('changed');
});
@artf - I tried this in my code an nothing happens. This works for you?
I'm running v. 12.58 😄
This works for you?
Yeah, it works with the demo (which uses the latest version)
I tried this in my code an nothing happens
Have you tried to change the structure of the template?
Related Questions and Answers
Continue research with similar issue discussions.
Issue #2061
[QUESTION] How to place a component at the end of the canvas.
How can I put my footer at the end of the canvas? I want the editor to not allow placing a block/widget below the footer. example
Issue #1466
Editing Saved html editor.setComponents slider load issue
I am working on a project where i integrated grapesJs for users to build there templates, save them in database and edit these saved templa...
Issue #460
When the component's view modifies the HTML, text components are no longer editable
I'm trying to build a custom component that contains some lorem ipsum text in the content, for editing once it's on the canvas. But I also...
Issue #551
Document dirty indicator
I'd like to indicate that the document is not saved. What would be the best way to know if the document data has changed from the last load...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.
Browse premium plugins →Related tutorials
In-depth guides on the same topic.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.