tinymce引入后未显示,首先动态添加TinyMCE编辑器显示，其他则不显示

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:

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.

解决方案

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