Add tinymce to new textarea dynamically

Question

How can i do this

function addTinyText(id, text){
//add textarea to DOM
$('<textarea id="txt'+id+'"></textarea>').append(text).appendTo('body');
//init tineMCE
 tinyMCE.init({
        theme : "advanced",
        plugins : "emotions,spellchecker"
});
//add tinymce to this
tinyMCE.execCommand("mceAddControl", false, 'txt'+id);
}

but as a result every time we have a new textarea+tinyMCE but no text inside

What do i wrong?

this works well on my system (FF9), which browser are you using? — Thariama, Feb 01 '12 at 08:47
my browser is Chrome 16 -- and my code really works well on it. mb any conflicts wuz there — Luciuz, Feb 01 '12 at 11:59
can you show me what the variable text holds? (i think i might now what's wrong here) — Thariama, Feb 01 '12 at 13:03
mb solution is tinyMCE.get('textareaId').setContent('
html
') after tinymce load. Is there onload trigger? — Luciuz, Feb 01 '12 at 13:05
I try to set this function as a callback of a button and I wish that the area was created when I clicked on the button if I make button 1 (create textarea with mce) and button 2 (set content to textarea). after that i'll click on 1st button, wait for tinymce is loaded, than click on the 2nd button -- everything will be ok — Luciuz, Feb 01 '12 at 13:43

score 3 · Answer 1 · answered Dec 18 '12 at 13:18

3

I searched a very long time to find an answer to a similar problem.

My content was not being posted even thou I could get the editor to appear.

I got it working like this:

    jQuery('.wysiwyg').tinymce({
      // Location of TinyMCE script
      script_url : 'path/tinymce/tiny_mce.js',

      // General options
      theme : "advanced",
     .........
     .........
     ......... etc

I used the standard jquery code to initiate all text areas with class name wysiwyg as tinymce objects.

After ajax call completes and new textarea is loaded I run this function:

jQuery(".wysiwyg").each(function(){ 
    tinyMCE.execCommand("mceAddControl",false, this.id);
});

Now my code is finally being posted correctly.

answered Dec 18 '12 at 13:18

Dieter Gribnitz

5,062
2
41
38

1

@DentraAndres Thank you very much. This is a big fail on all tutorials and blog posts on this subject. Important detail if you are trying to dynamically initialize a TinyMCE textarea.. – Henrik Apr 30 '16 at 15:02
1

For other people who read this: I was running TinyMCE 4.0.28, which required me to change `mceAddControl` to `mceAddEditor`. This is true for the current version of TinyMCE (5.2.0-75) as well, as of Mar 16, 2020 – Bing Mar 16 '20 at 21:26

score 1 · Accepted Answer · answered Feb 03 '12 at 09:19

1

line

$('<textarea id="txt'+id+'"></textarea>').append(text).appendTo('body');

should be line

$('<textarea id="txt'+id+'"></textarea>').text(text).appendTo('body');

answered Feb 03 '12 at 09:19

Luciuz

1,637
5
14
15

Add tinymce to new textarea dynamically

2 Answers2

Linked