Jquery IPWEDITOR, tinyMCE, and Live

Hi,
I thought that I would share this with you: I wanted to add DOM elements and have the IPWEDITOR with tinyMCE fire everytime I clicked the element to launch tinyMCE. I found out how to do it when elements are in the dom and then have the jquery code fire-up, however, I couldn't get it to fire when I'm dynamically loading elements into the dom.

So here's what I did, I used the live function in jquery:

Normally:

//Create an instance of the TinyMCE    var ed = new tinymce.Editor(".f_editableArea", {                    some_setting: 1                });
//Apply this to a selection$(".f_editableArea").editable({                    type: "wysiwyg",                    editor: ed,                    onSubmit: function submitData(content){                        alert(content.current)                    },                    submit: 'ok',                    cancel:'cancel'                });

Now, to use the live function you would do it this way :

    var ed = new tinymce.Editor(".f_editableArea", {
                    some_setting: 1
                });
 $(".f_editableArea").live("click", function(){                    $(this).editable({
                    type: "wysiwyg",
                    editor: ed,
                    onSubmit: function submitData(content){
                        alert(content.current)
                    },
                    submit: 'ok',
                    cancel:'cancel'
                });
 });

The highlighted section is the new section, I simply called the live function on the selection passing in the event as click and using a function. I then used this to call the selection and launch the plugin.

I hope this helps...

Read More