Detect changes in the editor content

[ghost]

Is this a bug report or feature request? (choose one)

🆕 Feature request

💻 Version of CKEditor

ckeditor5-build-classic-1.0.0-beta.3

Request

As a developer I would like to have the possibility to detect that the editor content contains changes and I also need to be able to reset the "dirty state" like in CKEditor4.
Here is the CKEditor4 API documentation:
https://docs.ckeditor.com/ckeditor4/latest/api/CKEDITOR_editor.html#method-checkDirty
https://docs.ckeditor.com/ckeditor4/latest/api/CKEDITOR_editor.html#method-resetDirty

[scofalik]

CKEditor 5 provides an event which is fired every time changes happen to the editor's content. See engine.model.Document#event:change for further information. Document instance is available at editor.model.document. Note, that the event is also fired for selection changes. If you want to filter them out, check if Differ instance (available at editor.model.document.differ) has any changes.

We don't provide a way to check if the editor "is dirty", however it would be quite easy to write it by yourself, either as a plugin or just code initialized after the editor has been created (in the Promise callback).

First, after the editor is init'ed, set isDirty variable/property to false. Then, listen to the change event described above. In the event callback, if editor.model.document.differ is not empty, set the variable/property to true. Add a method or function that will set the property back to false when needed.

[Reinmar]

EDIT for the above comment.

In ckeditor5@v11.0.0 (ckeditor5-engine@10.2.0) we introduced a new event: Document#change:data which is fired only when data might change. So it filters out changes like selection move.

You can use it like this:

editor.model.document.on( 'change:data', () => {
    console.log( 'The data has changed!' );
} );

[helenburns]

Sorry for my ignorance but if I was initialising the editor like this:

$(document).ready(function() { InlineEditor .create(document.querySelector( '#editor' ), { placeholder: 'General page text...' }) .catch(error => { console.error( error ); }); });

...how/where would I apply the code you've suggested above? I'm new to this and I'm struggling with putting any answers I find into context and getting them working! (Also, I can't seem to get my code here to showing in a block! Argh!)

[Mgsy]

Hi @helenburns. create() method returns a promise which resolves with the editor's instance, so the easiest way to implement this code will be adding it inside then(). I've modified your code to show you the example:

$(document).ready( function() {
    InlineEditor .create( document.querySelector( '#editor' ), { 
        placeholder: 'General page text...' 
    } )
    .then( editor => {
        editor.model.document.on( 'change:data', () => {
            console.log( 'The data has changed!' );
        } );
    } )
     .catch( error => { console.error( error ); } ); 
} );

Also, I can't seem to get my code here to showing in a block!

Put your code between ``` 😉

[helenburns]

Oh thank you so much!! It's so easy for people like me, who know a bit but not quite enough, to get confused and switch off to the amazing tools out there like CKEditor when all it takes is a little time from someone to explain a bit. Thanks so much.

[shibbirweb]

How can I changed data?

[gregrowles]

The answer you're looking for is "editor.getData()"...

`

	.create( document.querySelector( 'textarea' ), {
		// toolbar: [ 'heading', '|', 'bold', 'italic', 'link' ]
	})
	.then( editor => {
		editor.model.document.on( 'change:data', () => {
			console.log( 'data changed to', editor.getData() );
		});
	})
	.catch( err => {
		console.error( err.stack );
	});

`