Как я могу удалить tinyMCE и затем добавить его? - PullRequest
Новая
       13

Как я могу удалить tinyMCE и затем добавить его?

34 голосов
/ 11 января 2011

Я пытаюсь добавить редактор tinyMCE на свою страницу, удалить его, затем добавить снова, но получаю ошибки.

Когда я запускаю часть A, затем часть B, затем снова часть A, я получаю сообщение об ошибке: 

Error: g.win.document is null
Source File: tiny_mce/tiny_mce.js Line: 1

Часть A 

        js += "            tinyMCE.init({ ";
        js += "                'mode' : 'exact', \n";
        js += "                'elements' : '" + ctrl.ID + "Editor', \n";
        js += "                'plugins' : 'insertdatetime,TVCMSLink,TVCMSImage',\n";
        js += "                'theme' : 'advanced',\n";
        js += "                'theme_advanced_layout_manager' : 'SimpleLayout',\n";
        js += "                'theme_advanced_buttons1' : 'backcolor, forecolor, |, bold, underline, strikethrough, |, numlist, bullist, charmap, |, undo, redo, |, anchor, link, tvlink, unlink',\n";
        js += "                'theme_advanced_buttons2' : '',\n";
        js += "                'theme_advanced_buttons3' : ''\n";
        js += "            });\n";

Часть B 

        js += "                        tinyMCE.getInstanceById('" + ctrl.ID + "Editor').remove();\n";

Edit:

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

function show_HP1B0() {
$('.EditLink').hide();
$.ajax({
    type: 'post',
    url: 'genericHandler.ashx',
    data: 'cmd=select&tableName=ExtraBlocks&id=4',
    dataType: 'json',
    success: function(data) {
        $('#HP1B0Editor').html(data['rows'][0]['Content']);
        alert($('#HP1B0Editor').html());
        tinyMCE.init({                 'mode' : 'exact', 
            'elements' : 'HP1B0Editor', 
            'plugins' : 'insertdatetime,Link,Image',
            'theme' : 'advanced',
            'theme_advanced_layout_manager' : 'SimpleLayout',
            'theme_advanced_buttons1' : 'backcolor, forecolor, |, bold, underline, strikethrough, |, numlist, bullist, charmap, |, undo, redo, |, anchor, link, tvlink, unlink',
            'theme_advanced_buttons2' : '',
            'theme_advanced_buttons3' : ''
        });
        var dlg = $('#ctl00_EXTRA_HTML_0_HP1B0Editor').dialog({
            modal: false,
            draggable: false,
            position: 'center',
            zIndex: 99999,  // Above the overlay
            width: 370,
            title: 'Content Block Editor',
            closeText: '',
            open: function () {
                $('body').css('overflow', 'hidden');
                if ($.browser.msie) { $('html').css('overflow', 'hidden'); } $('<div>').attr('id', 'loader').appendTo('body').show();
            },
            close: function () { $('body').css('overflow', 'auto'); if ($.browser.msie) { $('html').css('overflow', 'auto'); } $('#loader').remove(); },
            buttons: {
                'Save': function () {
                    tinyMCE.getInstanceById('HP1B0Editor').remove();
                    $('.EditLink').show();
                    $(this).dialog('close');
                },
                'Cancel': function () {
        alert('HP1B0Editor');
                    tinyMCE.getInstanceById('HP1B0Editor').remove();
                    $('.EditLink').show();
                    $(this).dialog('close');
                }
            }
        }).parent();
        dlg.appendTo(jQuery('form:first'));
    },
    error: function(data) {
        $('.EditLink').show();
        $('#HP1B0Editor').html('Error');
    }
});
}

Ответы [ 14 ]

72 голосов
/ 11 января 2011

Чтобы полностью удалить экземпляр редактора и избежать ошибок, используйте: 

tinymce.EditorManager.execCommand('mceRemoveControl',true, editor_id);

Для повторной инициализации экземпляра используйте: 

tinymce.EditorManager.execCommand('mceAddControl',true, editor_id);

Помните, что при перемещении редакторов TinyMCE в DOMнужно removeControl и addControl тоже, иначе это приведет к ошибкам JS.

Начиная с TinyMCE 4 методы удаления и повторной инициализации экземпляра теперь ...

Чтобы полностью удалить экземпляр редактора и избежать ошибок, используйте: 

tinymce.EditorManager.execCommand('mceRemoveEditor',true, editor_id);

Для повторной инициализации экземпляра используйте: 

tinymce.EditorManager.execCommand('mceAddEditor',true, editor_id);
28 голосов
/ 19 ноября 2015

Поздно на вечеринке, но это может спасти кого-то от головной боли. Вот что у меня сработало в версии 4.2.4 (2015-08-17): 

tinymce.EditorManager.editors = [];

Тогда я мог бы повторно запустить редактор на том же динамически созданном div 

tinymce.init({selector:"#text"});
15 голосов
/ 10 сентября 2013

Это работает для меня: 

if (typeof(tinyMCE) != "undefined") {
  if (tinyMCE.activeEditor == null || tinyMCE.activeEditor.isHidden() != false) {
    tinyMCE.editors=[]; // remove any existing references
  }
}
13 голосов
/ 12 декабря 2016

Теперь можно просто сделать 

tinymce.remove("#id .class or tag");
7 голосов
/ 13 января 2016

Если у вас есть больше редакторов с различными настройками, это способ перезапустить их с сохранением настроек. 

tinymce.EditorManager.editors.forEach(function(editor) {
    // code injection
    var old_global_settings = tinymce.settings;
    tinymce.settings = editor.settings;
    tinymce.EditorManager.execCommand('mceRemoveEditor', false, editor.id);
    tinymce.EditorManager.execCommand('mceAddEditor', false, editor.id);
    tinymce.settings = old_global_settings;
});
4 голосов
/ 03 мая 2013

Хорошо. Просто предупреждение.

Если у вас есть, скажем .. всего 5 текстовых областей, в которые вы хотите добавить / удалить экземпляры tinymce.

И

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

Почему? .. потому что, хотя все будет работать нормально, все отсоединение и повторное присоединение tinymce займет много времени для выполнения. Браузер предложит остановить скрипт для вас и т. Д.

source : мой собственный опыт, когда я пытался хранить разные текстовые области в отдельных скрытых div-элементах и ​​показывать их пользователю при необходимости.

3 голосов
/ 16 ноября 2017

Попробуйте это: 

 tinymce.remove();

    setTimeout(function () {
    tinymce.init(
        {
        selector: 'textarea',
        menubar: false,
        height: "300",
        plugins: [
            'advlist autolink lists link image charmap print preview anchor textcolor ksfm',
            'searchreplace visualblocks code fullscreen',
            'insertdatetime media table contextmenu paste code help'
        ],
        toolbar: 'undo redo | fontselect fontsizeselect styleselect | alignleft aligncenter alignright alignjustify | bold italic underline strikethrough | link table | ksfm'
        }
        );

    }, 1);
1 голос
/ 31 октября 2016

Для удаления существующего редактора tinymce и добавления новых необходимо очистить массив tinymce.EditorManager.editors. Это решение работает в обоих случаях: 1. Если у вас есть только один редактор, и вы хотите удалить и добавить его снова. 2. Если у вас есть несколько редакторов, и вы хотите удалить специальный редактор и добавить его снова. 

console.log(tinymce.EditorManager.editors);

Это даст вам представление о массиве и точном индексе нужного вам редактора, который вы хотите удалить. Например, один пример вывода вышеуказанной консоли может быть: 

Array[2]
0:B
1:B
length:2
textarea-1:B
textarea-2:B
_proto_Array[0]

Это вывод консоли, когда у меня есть два редактора tinymce на textareas: # textarea-1 и # textarea-2 Предположим, я хочу удалить # textarea-2 и повторно добавить его, тогда это можно сделать следующим образом : 

tinymce.EditorManager.editors.splice(1, 1);//removing second element in array.
delete tinymce.EditorManager.editors['textarea-2'];//deleting respective textarea id from array

Затем вы можете добавить его снова, используя init: 

tinymce.init({
    selector:'#ts-textarea-2'
});

Если у вас есть только одна текстовая область, связанная с редактором tinymce, скажем: # textarea-1, и вы хотите удалить и повторно инициализировать ее, тогда вы можете просто очистить tinymce.EditorManager.editors: 

tinymce.EditorManager.editors = [];

И затем вы можете добавить команду init, как описано выше. Работал на меня безо всяких ошибок.

Надеюсь, это поможет

1 голос
/ 26 июля 2016

Просто обновите его!

Если вы смотрите на это, чтобы сбросить содержимое редактора, вместо того, чтобы уничтожать его и инициализировать снова, вы можете просто изменить содержимое следующим образом 

var editor = tinymce.get('editor_id'); //the id of your textarea
editor.setContent(content);  //any html as string
0 голосов
/ 03 декабря 2018

Попробуйте это: 

    var default_value_1 = 'test';
    var default_value_2 = 'test';

    tinyMCE.remove();

    tinyMCE.init({
        selector: '#id_element_1',
        plugins: 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists textcolor wordcount imagetools contextmenu colorpicker textpattern help code',
        toolbar: "code formatselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify  | numlist bullist outdent indent  | removeformat"
    }).then(function(editors){
        editors[0].setContent(default_value_1 || '');
    });

    tinyMCE.init({
        selector: '#id_element_2',
        plugins: 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists textcolor wordcount imagetools contextmenu colorpicker textpattern help code',
        toolbar: "code formatselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify  | numlist bullist outdent indent  | removeformat"
    }).then(function(editors){
        editors[0].setContent(default_value_2 || '');
    });
Страница:
...