第一个动态添加的 TinyMCE 编辑器显示，其他没有答案

【问题标题】：First dynamically-added TinyMCE editor displays, others do not第一个动态添加的 TinyMCE 编辑器显示，其他没有
【发布时间】：2013-09-03 12:27:02
【问题描述】：

我正在构建一个 javascript 应用程序，它将显示一个实时更新的讨论线程。它会定期轮询服务器以获取新数据，并将其写入页面。对于发布 cmets 和回复，我们正在尝试使用 TinyMCE WYSIWYG 编辑器，它将文本区域转换为漂亮的 HTML 编辑器。这是我第一次使用这个编辑器。该应用严重依赖 jQuery，因此我们使用 TinyMCE 的 jQuery 插件使其更易于使用。

问题来了...每次我们的代码生成一个新的文本区域时，我们都会为其附加一个编辑器。第一个出现并完美运行。当我们添加更多时，TinyMCE 代码会隐藏 textarea，但不会生成编辑器，我不知道为什么。

我已经在 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;
}

任何帮助将不胜感激。谢谢。

【问题讨论】：

标签： javascript jquery tinymce wysiwyg tinymce-4

【解决方案1】：

您应该为新文本区域添加类，然后每 5 秒在该类上应用 tinymce 这是对您的 jsfiddle 的更新

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/

【讨论】：

【解决方案2】：

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

不适用于我，我将其替换为 tinymce.EditorManager.execCommand('mceAddEditor', false, uniqeId);

【讨论】：