Отображается первый динамически добавляемый редактор TinyMCE, остальные нет

Я создаю приложение javascript, которое будет отображать обновляемую дискуссионную ветку. Он будет регулярно опрашивать сервер на наличие новых данных и записывать их на страницу. Для публикации комментариев и ответов мы пытаемся использовать редактор TinyMCE WYSIWYG, который преобразует текстовое поле в удобный HTML-редактор. Это мой первый опыт работы с этим редактором. Приложение в значительной степени зависит от jQuery, поэтому мы используем подключаемый модуль jQuery TinyMCE, чтобы упростить работу с ним.

Вот в чем проблема... Каждый раз, когда наш код генерирует новую текстовую область, мы присоединяем к ней редактор. Первый показывает и работает отлично. Когда мы добавим больше, код TinyMCE скроет текстовое поле, но не создаст редактор, и я не знаю почему.

Я пошел дальше и построил простой рабочий пример на 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 wysiwyg tinymce tinymce-4
person Ben Brandt    schedule 30.08.2013    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Вы должны добавить класс для новой текстовой области, а затем применять 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/

person Sam Battat    schedule 30.08.2013

arrow_upward
0
arrow_downward 

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

у меня не работало, заменил на tinymce.EditorManager.execCommand('mceAddEditor', false, uniqeId);

person Rana    schedule 23.04.2015