javascript 删除 TinyMCE 控件并重新添加
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10095696/
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
Remove TinyMCE control and re-add
提问by FlavorScape
I have a js application that never reloads the page, so when navigating I need to remove TinyMCE controls entirely, and then I want to re-initialize when navigating to an area that needs it. I tried the accepted answer to this question, but it seems to do nothing.
我有一个从不重新加载页面的 js 应用程序，因此在导航时我需要完全删除 TinyMCE 控件，然后我想在导航到需要它的区域时重新初始化。我尝试了这个问题的公认答案，但似乎什么也没做。
How do i remove tinyMCE and then re-add it?
tinymce.EditorManager.execCommand('mceRemoveControl',true, editor_id);
and my specific implimentation:
和我的具体含义：
//if I throw an alert here, it does get called, so I know it's not null
if (tinyMCE.getInstanceById("main-text"))
tinyMCE.EditorManager.execCommand('mceRemoveControl', true, "main-text");
I also tried
我也试过
tinyMCE.remove( tinyMCE.getInstanceById("main-text"));
// AND
tinyMCE.remove( "main-text");
I know that that statement gets executed when I put an alert in the conditional... I know that is the correct ID-- Is there something else buried in the API that I'm missing? This is Not the jQuery version. The editor persists after the remove attempt, and I even get a new one with the same ID if i re-init it by navigating back to the state with the form.
我知道当我在条件中放置警报时，该语句会被执行......我知道这是正确的 ID——API 中是否还有其他东西被我遗漏了？这不是 jQuery 版本。删除尝试后编辑器仍然存在，如果我通过导航回带有表单的状态重新初始化它，我什至会得到一个具有相同 ID 的新编辑器。
EDIT: the solution below does not work in current build 3.5b3, only in 3.4.9. There is a bug where 't is undefined'
编辑：下面的解决方案在当前版本 3.5b3 中不起作用，仅在 3.4.9 中起作用。存在“t 未定义”的错误
Just in case, this is the relevant part of the DOM after the init.
以防万一，这是 init 之后 DOM 的相关部分。
<textarea id="main-text" style="display: none;" aria-hidden="true"></textarea>
<span id="main-text_parent" class="mceEditor defaultSkin" role="application" aria-labelledby="main-text_voice" style="display: inherit;">
<span id="main-text_voice" class="mceVoiceLabel" style="display:none;">Rich Text Area</span>
<table id="main-text_tbl" class="mceLayout" cellspacing="0" cellpadding="0" role="presentation" style="width: 100%; height: 400px;">
<tbody>
<tr class="mceFirst" role="presentation">
<td class="mceToolbar mceLeft mceFirst mceLast" role="presentation">
<div id="main-text_toolbargroup" aria-labelledby="main-text_toolbargroup_voice" role="group" tabindex="-1">
<span role="application">
</div>
<a onfocus="tinyMCE.getInstanceById('main-text').focus();" title="Jump to tool buttons - Alt+Q, Jump to editor - Alt-Z, Jump to element path - Alt-X" accesskey="z" href="#"></a>
</td>
</tr>
<tr>
<tr class="mceLast">
</tbody>
</table>
</span>
采纳答案by Patricia
I've run into this a few times. To solve it i make sure the tinyMCe control doesn't have focus (causes some bugs in some browsers), remove the tinyMCE control, and remove the text area that the control was associated with.
我已经遇到过几次了。为了解决这个问题，我确保 tinyMCe 控件没有焦点（在某些浏览器中导致一些错误），删除 tinyMCE 控件，并删除与控件关联的文本区域。
Here's the relevant code:
这是相关的代码：
if (typeof tinyMCE != 'undefined') {
tinyMCE.execCommand('mceFocus', false, 'main-text');
tinyMCE.execCommand('mceRemoveControl', false, 'main-text');
var container = document.getElementById('main-text-parent');
container.removeChild(document.getElementById('main-text'));
//i normally just do $("#main-text").remove(); but you specified not using jquery, so this should, in theory, remove it, if main-text-parent is replaced with the parent container of your main-text.
}
回答by Shashank
Any one who come across this post. Now tinymce 4.Xhave support for Removing a editor or editors form page just by calling remove function.
任何遇到这篇文章的人。现在tinymce 4.X支持通过调用 remove 函数来删除一个编辑器或编辑器表单页面。
http://www.tinymce.com/wiki.php/api4:method.tinymce.remove
http://www.tinymce.com/wiki.php/api4:method.tinymce.remove
// 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');
