CODEWITHSUNDEEP
jquerydynamicnulltinymce
waszil
waszil

Reputation: 470

tinyMCE setContent - dynamically (jQuery) added textarea

I have some fields listed on my page, each has a button that creates a textarea that is to be converted to tinyMCE, and the content shall be updated with a string that is from an ajax request. Like this:

$("table td.bio-td").delegate(".btn", "click", function() {
     ...         
     var id = this.id;
     $('#cont').html('<textarea id="mceeditor_'+id'">xyz</textarea>');
     tinymce.EditorManager.execCommand('mceAddControl',true, 'mceeditor_'+id);
     tinymce.activeEditor.setContent(ajax_str);
     ...
});

The code works properly except for one thing: the setContent() line. I get an error in the javascript console, that the activeEditor is null. Somehow tinyMCE cannot find the editor in the DOM? Then how did it convert to tinymce object before?

Upvotes: 2

Views: 12424

Answers (4)

sandesh
sandesh

Reputation: 21

I had the same problem.

Move tinymce.init to the end of the page.

Use $('#terms').val('ssssss') to update the textarea on ajax success.

Once the textarea is updated then it will get converted to an editor.

Upvotes: 2

TchiYuan
TchiYuan

Reputation: 4278

I stumbled upon the same problem.

I'm using Jquery UI Tabs (jquery ui library) and in each tab that I dynamically create, I'm trying to initialize a tinyMCE instance for textarea in each tab. Every time you click a button an ajax request is made to the server to get information and a javascript handler creates a new tab with the infos.

The problem that seems to be happening is that on the callback when the server returns with a response in your callback handler, if you do the following call in the same thread

tinyMCE.execCommand("mceAddControl",false, "my_element" + elementid);
tinyMCE.get("my_element" + elementid).setContent("hello world!");

The "tinyMCE.get(..)" will return null.

It appears that the new mce control that you are adding only finishes being created once the callback handler function has completely finished executing.

Therefore, you will need to call this : 

tinyMCE.get("my_element" + elementid).setContent("hello world!");

Somewhere else, later (by an event triggered afterwards).

Update (Edit) :

So I told you all this without really testing it. But finally I have, and I'm confirming that this is what's happening. I did a not-so-pretty-hack where I use a timer to trigger 100 milliseconds later such as:

tinyMCEHack_timer = setTimeout("finish_setting_mce_content()",100);

Ideally you'll want to find a better event than this.

You'll also have to find a way to pass the data from your ajax callback handler to your timer callback handler. Again, it's not pretty but I used a global variable (variable who's scope is the entire page).

Good luck!

Upvotes: 1

Thariama
Thariama

Reputation: 50840

Easiest way is

tinymce.get('mceeditor_'+id).setContent(ajax_str);

Upvotes: 2

Sudhir Bastakoti
Sudhir Bastakoti

Reputation: 100205

Try doing:


tinymce.get('your_textarea_id').focus();
tinymce.activeEditor.setContent(ajax_str);

Hope it helps

Upvotes: 7

Related Questions