Search code examples
javascriptjqueryeventsjwysiwyg

handling events with jWYSIWYG online editor


I'm trying to enable a button when the text in the jWYSIWYG textarea is changed. As far as i know, the jWYSIWYG when invoked, removes the textarea and places an iframe in its place, so $("#my-textarea-id") selector wont return any object. These are the attempts i made, all of them failed:

ATTEMPT 1:

as shown here this code should work, but it does not :(

$("#my-textarea-id").wysiwyg({
    event:{
        keyup: function(e){
            $("#my-button").attr("disabled",false);
        }
    }
});

ATTEMPT 2:

in following attempts i'm initalizating the jWYSIWYG textareas from a diferent script that applies the .wysiwyg(...) function to all .RTF elements in the page (my textarea has this class).

The new frame that jWYSIWYG places has [old_textarea_id]-wysiwyg-iframe as ID, so i tried this:

$("#my-textarea-id-wysiwyg-iframe").keyup(function(){
    $("#my-button").attr('disabled',false);
});

but failed again.

ATTEMPT 3:

The iframe part containing the text of the textarea has the .wysiwyg class. My last attempt was this:

$(".wysiwyg").keyup(function(){
    $("#my-button").attr('disabled',false);
});

I have no idea how to handle the events over the jWYSIWYG elements so i ask for your help. Thank you!


Solution

  • this solved my problem

    Adding event handler to an iframe using JQuery

    jWYSIWYG replaces the textarea for an iframe. The below question's answer tells the appropiate way to bind events to the iframes and this way one can handle events of the RTF online editor.

    i think the question can be useful for people so i'll not delete it for now.