You need to be logged in to post in the forum - Log In

An active JCE Pro Subscription is required to post in the forum - Buy a Subscription

Support is currently Online

Official support hours
Monday to Friday
09:00 - 17:00 Europe/London (BST)

#107008 Detect change in editor textarea with jQuery

Posted in ‘Editor’
This is a public ticket

Everybody will be able to see its contents. Do not include usernames, passwords or any other sensitive information.

Latest post by [email protected] on Thursday, 04 March 2021 14:24 GMT

[email protected]
Hi, I would need to detect the change in JCE textarea in my script using jQuery, but I'm not able to do this. When trying to detect the textarea I used:

jQuery("body").on("click", function(e) {
          console.log(e.target);
});
It detects the click on editor toolbars, but not in textarea itself which seems to be inside iframe. But also this doesn't work:

jQuery("iframe").load(function(){
        jQuery(this).contents().on("mousedown, mouseup, click", function(){
            alert("Click detected inside iframe.");
        });
 });
My goals is to call a function when there is a change detected in any of the JCE textarea's on my form. What am I missing? Thanks!

Ryan
The textarea is only updated when the editor content is saved, so you need to use the editor API to detect changes in the editor content before saving, ie: while creating content. You can't do this with jQuery, but this might help:

(function () {
  tinyMCE.onAddEditor.add(function (mgr, ed) {
    ed.onPreInit.add(function () {
      ed.onChange.add(function () {
        console.log('content changed');
      });
    });
  });
})();

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

[email protected]
That did the trick!

Thank you!!!