TinyMCE:Configuration/onchange callback

From Moxiecode Documentation Wiki

Option: onchange_callback

This option should contain a function name to be executed each time content is modified by TinyMCE. This function is called each time an undo level is added to TinyMCE. The format of this function is: onchange(inst), where inst is the editor instance object reference.

Example of usage of the onchange_callback option

function myCustomOnChangeHandler(inst) {
	alert("Some one modified something");
	alert("The HTML is now:" + inst.getBody().innerHTML);
}

tinyMCE.init({
	...
	onchange_callback : "myCustomOnChangeHandler"
});

Note:

This function is called when the editors contents is changed just like a textarea or input field the event will fire ones you blur the area but it will also fire when a new undo level is added to the queue. Undo levels are added when the user types text and then moves the caret, performs an action like pressing the bold button while having text selected or pressing return there are many ways undo levels gets added to the editor.

We strongly recommend users to utilize the isDirty method to determine if the editor contents was changed or not since this is much more exact since it doesn't need undo levels/blurring etc.

It seems to be important to document why it doesn't fire at each keystroke the simple answer is that it's a performance thing. Executing the onchange callback all the time is just bad practice and wastes the users CPU better to check the isDirty state before leaving the page in an document onbeforeunload event this is how the autosave plugin functions. The isDirty approach is the recommended way of tracking if an editor instance is modified or not.