adivasile
adivasile

Reputation: 2487

Problem when dynamically adding TinyMCE

I have a page where I add textareas to the DOM with javascript and I would like them to have a TinyMCE editor attached.

When I add the first textarea everything is fine.The problems occurs with the next ones added. It looks something like this: http://dl.dropbox.com/u/1918752/tinymce_problem.png

In the firebug console, there's an "d is undefined" error thrown.

I'm using

tinyMCE.execCommand("mceAddControl", false, 'textarea_id');

to add TinyMCE control to the newly inserted textarea.

I'm using TinyMCE version 3.0.1 and unfortunately upgrading isn't really an option now.

Later edit:

The function I use to insert textareas:

function add_fields(link, association, content) {
    var new_id = new Date().getTime();
    var regexp = new RegExp("new_" + association, "g");
    var reg = new RegExp("child_", "g");
    $(link).up().previous('ul').insert(content.replace(regexp, new_id).replace(reg, "child_"+new_id));
    if($('estore_products_category_children_attributes_'+new_id+'_description')) {
      tinyMCE.execCommand("mceAddControl", false, 'estore_products_category_children_attributes_'+new_id+'_description');
    }
}

The content parameter is where the textarea is. This is used in a rails application, and I created a helper which returns a standard chunk of html based on the types of associations used, and then I replace the generic ID's with new unique ones and insert in into the DOM.

Upvotes: 0

Views: 3123

Answers (1)

Thariama
Thariama

Reputation: 50840

I think you did not shut down tinymce correctly in order to recreat an edito instance with the same id!

To shut down an editor instance correctly use:

tinyMCE.execCommand("mceRemoveControl", false, 'textarea_id');

This is necessary when you move the editor around inside the dom or when you remove parts of the dom containing the editor iframe.

Upvotes: 2

Related Questions