First dynamically-added TinyMCE editor displays, others do not

Question

I'm building a javascript app that will be displaying a live-updated discussion thread. It will regularly poll the server for new data, and write it to the page. For posting comments and replies, we are trying to use the TinyMCE WYSIWYG editor, which converts a textarea into a nice HTML editor. This is my first experience with this editor. The app relies heavily on jQuery, so we are using TinyMCE's jQuery plugin to make it easier to work with.

Here's the issue... Every time our code generates a new textarea, we attach an editor to it. The first one shows up and works perfectly. When we add more, the TinyMCE code will hidfe the textarea, but won't generate the editor, and I don't know why.

I've gone ahead and built out a simple working example on jsFiddle:

http://jsfiddle.net/HUHKT/

function addTextArea(){
    // find where the textareas will be placed
    var container = $('#textareaContainer');
    container.append( newTextArea() );
    container.append( $(document.createElement('hr')) );
}

// define some configuration settings for the editor
var editorConfig = {
    // Location of TinyMCE script
    script_url: 'http://tinymce.cachefly.net/4.0/tinymce.min.js',
    // setup parameters
    menubar: false,
    statusbar: false,
    toolbar: 'bold italic underline | bullist numlist | undo redo | removeformat'
}

function newTextArea(){
    var textarea = $(document.createElement('textarea'))
        .attr('id',(new Date()).getTime()) // give it a unique timestamp ID
        .val( 'This text area added @ ' + new Date() )
        .tinymce(editorConfig); // apply the WYSIWYG editor

    return textarea;
}

Any help would be appreciated. Thank you.

Answer 1

You should add class for the new text area, then apply tinymce on that class every 5 sec Here is an update to your jsfiddle that works

function timerElapsed(){
    // limit this example so we don't fill up the page with too many textareas
    if( $('#textareaContainer').find('textarea').length < 4 ){
        addTextArea();
    }
    // define some configuration settings for the editor
    var editorConfig = {
        // Location of TinyMCE script
        script_url: 'http://tinymce.cachefly.net/4.0/tinymce.min.js',
        // setup parameters
        menubar: false,
        statusbar: false,
        toolbar: 'bold italic underline | bullist numlist | undo redo | removeformat'
    }
    $('.tinymce-txt').tinymce(editorConfig);
}

function addTextArea(){
    // find where the textareas will be placed
    var container = $('#textareaContainer');
    container.append( newTextArea() );
    container.append( $(document.createElement('hr')) );
}

function newTextArea(){
    var textarea = $(document.createElement('textarea'))
        .attr('id',(new Date()).getTime()) // give it a unique timestamp ID
        .val( 'This text area added @ ' + new Date() )
        .attr('class', 'tinymce-txt');// apply the WYSIWYG editor

    return textarea;
}

$('#btnAdd').click( function(){ addTextArea(); } );

// set up the regular "polling" code
setInterval(function () {
    timerElapsed();
}, 5000);
// NOTE: I also tried a repeating setTimeout function and had the same problem

http://jsfiddle.net/HUHKT/5/

Answer 2

 `$('.tinymce-txt').tinymce(editorConfig);` 

did not work with me, I replaced it with tinymce.EditorManager.execCommand('mceAddEditor', false, uniqeId);