it-swarm.com.ru

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

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

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

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

Часть А

        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";

Часть Б

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

Правка:

Выше приведены бэкэнды, которые создают 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');
    }
});
}
34
Justin808

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

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);
72
Thariama

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

tinymce.EditorManager.editors = []; 

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

tinymce.init({selector:"#text"});   
28
Eric

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

if (typeof(tinyMCE) != "undefined") {
  if (tinyMCE.activeEditor == null || tinyMCE.activeEditor.isHidden() != false) {
    tinyMCE.editors=[]; // remove any existing references
  }
}
15
dageddy

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

tinymce.remove("#id .class or tag");
12
jberculo

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

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;
});
6
rioted

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

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

А ТАКЖЕ 

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

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

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

4
Rakesh

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

 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);
2
Kamil Smrčka

Для удаления существующего редактора 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 = [];

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

Я надеюсь, что это помогает

1
Learner

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

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

var editor = tinymce.get('editor_id'); //the id of your textarea
editor.setContent(content);  //any html as string
1
azerafati

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

    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 || '');
    });
0
nthaih

В начале я использовал:

tinymce.execCommand('mceRemoveEditor', true, id);
tinymce.execCommand('mceAddEditor', true, id);

Но эти команды выполняются асинхронно, поэтому команда add часто терпит неудачу. В качестве обходного пути я бы:

tinymce.execCommand('mceRemoveEditor', true, id);
setTimeout(function() {
    tinymce.execCommand('mceAddEditor', true, id);
}, 500);

Но я ненавидел это решение, потому что оно показалось пользователю медленнее, и даже при этом вы не могли быть уверены, что 500 мсек будет достаточно, если компьютер работает медленно.

Сейчас я использую:

tinymce.remove(id);
tinymce.init({
    selector: id
});

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

Попробуйте это здесь: https://jsfiddle.net/g0u059au/

0
Bjørn Stenfeldt

Все вышеперечисленные решения не сработали для меня ... Это сработало в моем закрытии всплывающего окна

var editor = tinyMCE.get('txtMailingText');
if (editor!=null) {
    editor.destroy();
}
0
Alexander
// Remove all editors bound to divs
tinymce.remove('div');

// Remove all editors bound to textareas
tinymce.remove('textarea');

// Remove all editors
tinymce.remove();

// Remove specific instance by id
tinymce.remove('#id');

из документации TINIMCE

0
mehmet

Для чего это стоит, я закончил этим:

  1. Попробуйте удалить редактор прямо перед тем, как добавить его на страницу (это работает для chrome)
  2. Прежде чем удалить редактор, запустите сохранение. Это было важно для Firefox по некоторым причинам.

Вот как это выглядело, чтобы добавить редактор:

  $(function() {
    tinymce.EditorManager.execCommand('mceRemoveEditor',true, 'fred');
    #{tinymce_javascript(:simple_editor, {height: 150, :selector => 'fred'})}
  });

  $(document).on('click', '.tinyMCE-save', function(event) {
    tinyMCE.triggerSave();
    return true;
  });

У меня был явный щелчок, который удалил редактор:

<a href="#" class="tinyMCE-save cool-js-click-handler">Cancel</a>
0
John Naegle