Javascript 如何删除 tinyMCE 然后重新添加它？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4651676/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do i remove tinyMCE and then re-add it?
提问by Justin808
I'm trying to add the tinyMCE editor to my page, remove it, then add it again but am getting errors.
我正在尝试将 tinyMCE 编辑器添加到我的页面，将其删除，然后再次添加，但出现错误。
When I run Part A, then Part B, Than Part A again I get the error:
当我运行 A 部分，然后是 B 部分，然后是 A 部分时，我收到错误消息：
Error: g.win.document is null
Source File: tiny_mce/tiny_mce.js Line: 1
Part 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";
Part B
乙部
js += " tinyMCE.getInstanceById('" + ctrl.ID + "Editor').remove();\n";
Edit:
编辑：
The above is the backend spinets that create the JavaScript... below is the full JavaScript function. The first time through it opens the dialog and works, the contents is in the editor and there is no error. When I click the close button, the dialog is closed. When I run the function again, the dialog displays but the editor is empty and there is the above error.
上面是创建 JavaScript 的后端 spinets……下面是完整的 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');
}
});
}
回答by Thariama
To cleanly remove an editor instance and avoid any errors use:
要彻底删除编辑器实例并避免任何错误，请使用：
tinymce.EditorManager.execCommand('mceRemoveControl',true, editor_id);
To reinitialize the instance use:
要重新初始化实例，请使用：
tinymce.EditorManager.execCommand('mceAddControl',true, editor_id);
Be aware that when moving TinyMCE editors in the DOM you need to removeControland addControltoo, otherwise it results in JS errors.
要知道，在DOM移动TinyMCE的编辑器，当你需要removeControl与addControl过，否则会导致JS错误。
As of TinyMCE 4the methods to remove and reinitialize an instance are now...
从TinyMCE 4 开始，删除和重新初始化实例的方法现在是......
To cleanly remove an editor instance and avoid any errors use:
要彻底删除编辑器实例并避免任何错误，请使用：
tinymce.EditorManager.execCommand('mceRemoveEditor',true, editor_id);
To reinitialize the instance use:
要重新初始化实例，请使用：
tinymce.EditorManager.execCommand('mceAddEditor',true, editor_id);
回答by Eric
Late to the party but it might save someone the headache. Here's what worked for me on version 4.2.4 (2015-08-17):
聚会迟到了，但这可能会让某人头疼。以下是在 4.2.4 (2015-08-17) 版本上对我有用的内容：
tinymce.EditorManager.editors = [];
Then I could re-init an editor on the same dynamically created div
然后我可以在同一个动态创建的 div 上重新初始化编辑器
tinymce.init({selector:"#text"});
回答by dageddy
This works for me:
这对我有用：
if (typeof(tinyMCE) != "undefined") {
if (tinyMCE.activeEditor == null || tinyMCE.activeEditor.isHidden() != false) {
tinyMCE.editors=[]; // remove any existing references
}
}
回答by jberculo
It is now possible to just do
现在可以做
tinymce.remove("#id .class or tag");
回答by rioted
In case you have more editors with different settings, this is the way to reastart them preserving settings.
如果您有更多具有不同设置的编辑器，这是重新启动它们以保留设置的方法。
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;
});
回答by Rakesh
Ok. just a word of caution.
好的。只是提醒一下。
If you have, say.. total of 5 textareas where you want to add/ remove tinymce instances.
如果你有，比如说......总共有 5 个文本区域，你想在其中添加/删除 tinymce 实例。
AND
和
you want to do this more than once on a given page, Then its better to look for an alternative solution for your requirement.
您想在给定页面上多次执行此操作，那么最好为您的要求寻找替代解决方案。
Why?.. because even though everything would work fine, all the detaching and re-attaching of tinymce is going to take muchtime to execute. The browser will offer to stop the script for you etc.
为什么？.. 因为即使一切正常，tinymce 的所有分离和重新连接都需要花费大量时间来执行。浏览器将提供为您停止脚本等。
source: my own experience where i tried keeping different textareas in separate hidden divs, and show it to the user when required.
来源：我自己的经验，我尝试将不同的文本区域保存在单独的隐藏 div 中，并在需要时将其显示给用户。
回答by Kamil Smr?ka
Try this:
尝试这个：
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);
回答by azerafati
Just update it !
只需更新它！
if you are looking at this to reset the content of the editor, instead of destroying it and initializing it again you can simply change the content like this
如果您正在查看此内容以重置编辑器的内容，而不是销毁它并再次初始化它，您可以简单地更改这样的内容
var editor = tinymce.get('editor_id'); //the id of your textarea
editor.setContent(content); //any html as string
回答by Learner
To remove existing tinymce editor and add new needs clearance of tinymce.EditorManager.editors array. This solution works in both cases : 1. If you have only one editor and you want to remove and add it again. 2. If you have multiple editors and you want to remove some special editor and add it again.
删除现有的 tinymce 编辑器并添加新的需要清除 tinymce.EditorManager.editors 数组。此解决方案适用于两种情况： 1. 如果您只有一个编辑器并且您想删除并重新添加它。2.如果您有多个编辑器，并且您想删除一些特殊的编辑器并重新添加它。
console.log(tinymce.EditorManager.editors);
This will give you a view of the array and exact index of you desired editor which you want to remove. For example one sample output of above console can be:
这将为您提供要删除的所需编辑器的数组和确切索引的视图。例如，上述控制台的一个示例输出可以是：
Array[2]
0:B
1:B
length:2
textarea-1:B
textarea-2:B
_proto_Array[0]
This is the output of the console when i have two tinymce editors on textareas : #textarea-1 and #textarea-2 Lets suppose I want to delete #textarea-2 and re-add it then it can be done as follows:
这是当我在 textareas 上有两个 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
Then you can add it again simply using init:
然后你可以简单地使用 init 再次添加它：
tinymce.init({
selector:'#ts-textarea-2'
});
If you have only one textarea associated with tinymce editor lets say : #textarea-1 and you want to remove and re-initialize it then you can just empty tinymce.EditorManager.editors by :
如果您只有一个与 tinymce 编辑器关联的 textarea 可以说：#textarea-1 并且您想删除并重新初始化它，那么您可以通过以下方式清空 tinymce.EditorManager.editors：
tinymce.EditorManager.editors = [];
And then you can add using init command as explained above. Worked for me without any error.
然后你可以使用上面解释的 init 命令添加。为我工作没有任何错误。
I hope it helps
我希望它有帮助
回答by John Naegle
For what its worth, I ended up doing this:
对于它的价值，我最终这样做了：
- Try to remove the editor right before I add it to the page (this worked for chrome)
- Before I remove the editor, trigger a save. This was important for firefox for some reason.
- 尝试在将编辑器添加到页面之前将其删除（这适用于 chrome）
- 在我删除编辑器之前，触发保存。出于某种原因，这对 Firefox 很重要。
Here is what it looked like to add the editor:
这是添加编辑器的样子：
$(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;
});
I had an explict click that removed the editor:
我有一个明确的点击删除了编辑器：
<a href="#" class="tinyMCE-save cool-js-click-handler">Cancel</a>
