Динамическое добавление TinyMCE-редактора в textarea убивает другие экземпляры

Question

У меня есть html-страница с одной или несколькими текстовыми областями, каждая из которых имеет TinyMCE-редактор (добавленный к ним с помощью tinyMCE.init({mode : "textareas", etc...});. Сначала все они работают как надо, проблем нет. На странице тоже есть кнопка, которая добавляет новую текстовую область на страницу (используя AJAX). В обработчике вызова AJAX я добавляю текст ответа к некоторому div на странице. После этого я пытаюсь добавить TinyMCE в новое текстовое поле, используя

tinyMCE.execCommand("mceAddControl", false, "text" + cnt);

Где cnt - это какое-то смещение, а "text" + cnt уникально для каждого текстового поля.

Это работает нормально, за исключением того, что все TinyMCE-редакторы, которые были на странице до появления нового, теперь пустые и не реагируют ни на какой ввод (ни на ввод, ни на нажатие какой-либо из их кнопок). Если я добавлю еще одну текстовую область на страницу, у нее будет рабочий редактор, а предыдущая также будет уничтожена.

Я попытался отдельно добавить TinyMCE к исходным текстовым областям, используя tinyMCE.init({mode : "none", etc...});, и для каждой текстовой области вызывался tinyMCE.execCommand("mceAddControl", false, "text" + cnt);. Но результат был тот же.

Я также пытался сделать tinyMCE.init({...}) снова для каждой новой текстовой области, но это дает тот же результат.

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

Answer 1

Я знаю, в чем проблема. Я добавил ответный текст AJAX-вызова, который генерирует поля ввода к элементу div, который уже содержал другие поля ввода. Это была проблема. Теперь я создаю новый div, в который я помещаю новые поля ввода (поэтому каждая текстовая область, в которой есть редактор tinyMCE, находится в своем собственном div). Это решает мою проблему.

Answer 2

У меня тоже была эта проблема, что для меня исправлено:

При динамическом добавлении каждой новой текстовой области необходимо было добавить mceAddControl после добавления на экран. Таким образом, в том же js, который добавил новую текстовую область для tinymce, я запускаю

$('.tinymce').each(function(){
    tinyMCE.execCommand('mceAddControl',false,$(this).attr('id'))
  });

, где tinymce - это класс моей Tinymce textarea's

Answer 3

У меня возникла именно эта проблема, и я потерял на нее часы и часы, пока rael_kid нашел его ответ, я добавлю свой для всех, кто столкнулся с этой проблемой.

Мой динамический контент был добавлен с

currentDiv.innerHtml += newContent;

Это перерисовывает весь innerhtml, который затем, кажется, ломает существующие редакторы tinymce. Чтобы этого не происходило, вам нужно использовать insertAdjacentHTML, как показано ниже:

currentDiv.insertAdjacentHTML('beforeend', newContent);

Надеюсь, это спасет кого-то еще от тех часов, которые я потерял!

Answer 4

вставить весь код инициализации после $(wrapper).append('write your fields row div or tr code here'); // работает нормально :)

tinyMCE.init({
    mode : "textareas",
    theme : "advanced",
        editor_selector : "mceEditor",
        editor_deselector : "mceNoEditor",  
    theme_advanced_buttons1 : "code,bold,italic,underline,image,separator,strikethrough,justifyleft,justifycenter,justifyright, justifyfull,bullist,numlist,undo,redo,link,unlink,|,tiny_mce_wiris_formulaEditor,tiny_mce_wiris_CAS,|,fullscreen,jbimages",
    theme_advanced_buttons2 : "",
    theme_advanced_buttons3 : "",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_statusbar_location : "bottom",
    plugins : 'inlinepopups,tiny_mce_wiris,jbimages',
    setup : function(ed) {
        // Add a custom button
        ed.addButton('mybutton', {
            title : 'My button',
            image : 'img/example.gif',
            onclick : function() {
                // Add you own code to execute something on click
                ed.focus();
                ed.selection.setContent('Hello world!');
            }
        });
    }
});

Answer 5

Я помню, у меня когда-то была похожая проблема ... эта тема должна помочь