How to apply javascript to a textarea CREATED by javascript?

Question

I have a div that when clicked uses the jeditable jQuery plugin to do some sort of HTML replace which changes the div into a form that contains a textarea.

I want to attach the tinyMCE JS to all textareas on my site. The problem I have is that the textarea is created dynamically AFTER the tinymce has been applied to textareas.

Can anyone think how to attach some very simple wysiyyg text editor (preferable tinymce) to the textarea control once it is created by jEditable?

I'm using the latest jQuery library in a PHP app.

Cheers,

Billy

Answer 1

What you want seems not possible at first. The reason for this is the following:

Tinymce creates on initialization a content-editable iframe (NOT a textarea!) which will be used to edit html content. There are editor actions (i.e. save) which will write the Iframes content back to the initial html element (can be a div, textarea or anything else).

The problem I have is that the textarea is created dynamically AFTER the tinymce has been >applied to textareas.

But you can initialize the tinymce whenever you like (you need to use the mode 'modal' for this) - even AFTER the textarea is created dynamically.

Answer 2

Using the TinyMCE jQuery Plugin, I think you could do this:

$(function() {
    $('div.editable_textarea')
        .editable({ ... })
        .click(function() {
            $(this).find('textarea').tinymce();
        });
});

I based that selector off the jEditable live demo.