TinyMCE isDirty method

Question

I have a web project for creating maps. I have a tinyMCE text box and a visual map. After changing the contents of the tinyMCE editor, I want to update the map's visual map to reflect the new text / changes.

TinyMCE comes with the IsDirty method:

if (tinyMCE.activeEditor.isDirty()) alert("You must save your contents."); 

I don’t understand WHERE I would put this expression to check it regularly. I understand that JS is event driven and therefore needs to be called, do I call it every keystroke?

Answer 1

You can add a global timeout function that every two seconds (the interval depends on you) checks:

 function updateCardIfDirty() { if (tinyMCE.isDirty()) { // rerender the card } } setInterval(updateCardIfDirty, 2000); // check every 2 seconds. 

A cleaner solution might be checking every time they make changes to the tinyMCE editor. This can be done using the onChange() tinyMCE event :

 tinyMCE.init({ ... setup : function(ed) { ed.onChange.add(function(ed, l) { // rerender the card }); } }); 

The disadvantage of the first approach is that it will be executed every 2 seconds, even if they do not edit the map for an hour. The disadvantage of the second approach is that if they make 10 changes in 1 second, it will retransmit the card 10 times per second.

So, let's try the third approach, which will get the best of both worlds, and lose both of the shortcomings that we mentioned:

 tinyMCE.init({ ... setup : function(ed) { ed.onChange.add(function(ed, l) { if (timeout) { clearTimeout(timeout); } timeout = setTimeout(function(){ timeout=null; rerenderCard(); }, 1000); }); } }); 

Answer 2

I am currently trying to figure out how to fix TinyMCE in this regard. Outside of TinyMCE, the current cross-browser solution should use the OnTextChange DOM event, which is supported by most current browsers. I am testing it today and it works great for right-click cut / paste / delete without changing the keyboard, as well as changing the keyboard. There are no keyboard events associated with a text messaging event. (Note: it must be prepared in the DOM, google jquery.textchange.js plugin).

However, this does not work when TinyMCE wraps a textarea control. I am currently looking at the source and plugins to find out how to implement this text messaging event.