On Change event Plugin for CKEditor

Introduction

This is a plugin that tries to fire a 'change' event whenever the content of a CKEditor instance is changed.

Author:

Alfonso Martínez de Lizarrondo

Version history:

1.0: 21-January-2011. First version.
1.1: 3-September-2011. Fixed issues with the UndoManager events. Detect changes in Source mode.
1.2: 18-September-2011. Avoid too many events in CKEditor 3.6.2. Filter keyboard to skip control and movement keys.
1.3: 22-December-2011 Avoid firing the event after the editor has been destroyed.
1.4: 7-September-2012 Don't fire events if the editor is readonly, thanks to Ulrich Gabor. Included code to use Mutation Observers.
1.5: 20-October-2012 Detect Cut and Paste for IE in source mode thanks to Jacki.
1.6: 18-November-2012 Detect multibyte characters thanks to Wouter.
1.7: 6-December-2012 Compatibility with Source mode in CKEditor 4.
1.8: 8-June-2013 Use setInterval fix by Roman Minkin.

Installation

1. Copying the files

Extract the contents of the zip in you plugins directory, so it ends up like this

ckeditor\
	...
	images\
	lang\
	plugins\
		...
		onchange\
			plugin.js
			docs\
				install.html
		...
	skins\
	themes\

2. Adding it to CKEditor

Now add the plugin in your config.js or custom js configuration file: config.extraPlugins='onchange';

3. Configuration

You can limit the minimum time between changes to avoid getting too many events fired: config.minimumChangeMilliseconds = 100; // 100 milliseconds (default value).

4. Use it

Write your listener for the new 'change' event and perform whatever action you need there. editor.on( 'change', function(e) { console.log(e) });.