第一個動態添加的TinyMCE編輯器顯示，其他人不

我正在構建一個JavaScript應用程序，它將顯示一個實時更新的討論主題。它將定期輪詢服務器以獲取新數據，並將其寫入頁面。爲了發佈評論和回覆，我們正在嘗試使用TinyMCE所見即所得編輯器，它將textarea轉換爲一個漂亮的HTML編輯器。這是我與這位編輯的第一次經歷。該應用程序嚴重依賴於jQuery，所以我們使用TinyMCE的jQuery插件使其更易於使用。第一個動態添加的TinyMCE編輯器顯示，其他人不

下面是問題...每次我們的代碼生成一個新的textarea時，我們都會附上一個編輯器。第一個出現並完美運作。當我們添加更多的時候，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; 
}

任何幫助，將不勝感激。謝謝。

來源

2013-08-30 Ben Brandt

您應該添加類的新文本區，然後在該類應用TinyMCE的每5秒這裏是更新了自己的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/

來源

2013-08-30 17:45:13

太棒了，謝謝！ –

不客氣 –

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

沒有與我一起工作，我將其替換爲 tinymce.EditorManager.execCommand('mceAddEditor', false, uniqeId);

來源

2015-04-23 10:51:38 Rana

第一個動態添加的TinyMCE編輯器顯示，其他人不

回答

相關問題