Как удалить tinyMCE, а затем повторно добавить его?
Я пытаюсь добавить редактор tinyMCE на свою страницу, удалить его, а затем добавить его снова, но я получаю ошибки.
Когда я запускаю Part A, затем Part B, Than Part 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:
Вышеописанные backet-шпинеты, которые создают 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');
}
});
}
Ответы
Ответ 1
Чтобы очистить экземпляр редактора и избежать ошибок, используйте:
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);
Ответ 2
Поздно к вечеринке, но это может спасти кому-то головную боль. Вот что сработало для меня в версии 4.2.4 (2015-08-17):
tinymce.EditorManager.editors = [];
Затем я мог бы перезапустить редактор на том же динамически создаваемом div
tinymce.init({selector:"#text"});
Ответ 3
Это работает для меня:
if (typeof(tinyMCE) != "undefined") {
if (tinyMCE.activeEditor == null || tinyMCE.activeEditor.isHidden() != false) {
tinyMCE.editors=[]; // remove any existing references
}
}
Ответ 4
Теперь можно просто сделать
tinymce.remove("#id .class or tag");
Ответ 5
Ok. Просто предупреждение.
Если у вас есть, скажем, всего 5 текстовых полей, где вы хотите добавить/удалить экземпляры tinymce.
И
вы хотите сделать это более одного раза на данной странице, тогда лучше искать альтернативное решение для вашего требования.
Почему?.. потому что, несмотря на то, что все будет работать нормально, все отключение и повторное прикрепление tinymce будут выполнять много время для выполнения. Браузер предложит остановить script для вас и т.д.
source: мой собственный опыт, когда я пытался хранить разные текстовые поля в отдельных скрытых div и показывать его пользователю, когда это требуется.
Ответ 6
Если у вас больше редакторов с разными настройками, это способ восстановить их сохранение.
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;
});
Ответ 7
Просто обновите его!
если вы посмотрите на это reset содержимое редактора, вместо того чтобы его уничтожить и снова инициализировать, вы можете просто изменить содержимое, подобное этому
var editor = tinymce.get('editor_id'); //the id of your textarea
editor.setContent(content); //any html as string
Ответ 8
Чтобы удалить существующий редактор 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 в текстовых областях: # 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, как описано выше. Работал для меня без ошибок.
Я надеюсь, что это поможет
Ответ 9
Попробуйте следующее:
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);
Ответ 10
Все вышеперечисленные решения не сработали для меня... Это отлично работало в событии закрытия всплывающих окон
var editor = tinyMCE.get('txtMailingText');
if (editor!=null) {
editor.destroy();
}
Ответ 11
В чем его ценность, я закончил это:
- Попробуйте удалить редактор прямо перед тем, как добавить его на страницу (это сработало для хрома)
- Прежде чем удалить редактор, вызовите сохранение. Это почему-то важно для 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>
Ответ 12
В начале я использовал:
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/