How to detect a change using jQuery for the contents of a text field using the jWYSIWYG plugin?

Question

I am using jwysiwyg plugin in text areas in my form (jwysiwyg: https://github.com/akzhan/jwysiwyg )

I want to detect changes in any of the text fields that are in my form.

Usually, with the standard non-wysiwyg textarea, I do:

$('textarea').change(function(e){ alert('Something changed!'); }); 

This is ineffective when jwysiwyg is used due to jwysiwyg DOM manipulation.

Does anyone have pointers?

Answer 1

Use this code, I checked it with / example / 01.basic.html and 02.full.html, I think this will work with others too:

 $(document).ready(function(){ var current = $("#wysiwyg-wysiwyg-iframe").contents().find('html'); function detectFn(){ alert('Detected'); } var timer; current.bind({ keyup: function(){ clearTimeout(timer); timer = setTimeout(detectFn, 2000) } }); }); 

Sources :
Yasser Lagari and Gommi have real meaning for this decision.

jQuery / JavaScript: accessing iframe content

When you press a key when stopping after the call function X seconds

Explanation

1) the "jwysiwyg plugin", what it does is replace the text box for the iframe. The text is inside the 'p' tag, another thing to keep in mind is that this tag cannot be clicked, if you click on the text, what you actually click is the iframed html tag.

2) For jQuery, to access and select an iframed element, you must use the content () method. Thus, we can run some functions with iframes.

3) Create a detectFn () function that will execute the code you want to use after detecting a change in the fake text area.

4) Declare the variable "timer".

5) The bind () method must be used with the iframed html tag to use the keyup event. In this way, the typing action of the text field will be modeled.

6) Each key will perform the detection function several times, to prevent this, we use the setTimeout method and store detectFn in the "timer" variable. Finally, the variable must be passed to clearTimeout as an argument, so each key cancels the previous execution of the discovery function.

Answer 2

I found this a lot easier:

  $('#editor_textarea').wysiwyg('document').keypress(function(e) { e.preventDefault(); //This will cancel the keypress alert('Keypress in jwysiwyg editor detected!'); }); 

Answer 3

You can set autoSave to true and do the following:

$ (element) .wysiwyg ('getContent'). afterSave (function () {/ magic /}

if you want, you can call the "change" of the element in this handler