删除 TinyMCE 控件并重新添加

Question

我有一个永远不会重新加载页面的 js 应用程序，因此在导航时我需要完全删除 TinyMCE 控件，然后我想在导航到需要它的区域时重新初始化。我尝试了这个问题的公认答案，但它似乎什么也没做。

How do i remove tinyMCE and then re-add it?

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

以及我的具体暗示：

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

我也试过了

  tinyMCE.remove( tinyMCE.getInstanceById("main-text"));
  // AND
  tinyMCE.remove( "main-text");

我知道当我在条件中添加警报时，该语句会被执行...我知道那是正确的 ID——API 中是否还有其他东西我遗漏了？这不是 jQuery 版本。删除尝试后编辑器仍然存在，如果我通过导航回表单状态重新初始化它，我什至会得到一个具有相同 ID 的新编辑器。

编辑：下面的解决方案在当前版本 3.5b3 中不起作用，仅在 3.4.9 中起作用。存在“t 未定义”的错误

以防万一，这是初始化后 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>

Answer 1

任何遇到此帖子的人。现在 tinymce 4.X 支持删除一个或多个编辑器表单页面，只需调用 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');

Answer 2

我遇到过几次。为了解决这个问题，我确保 tinyMCe 控件没有焦点（在某些浏览器中会导致一些错误），删除 tinyMCE 控件，并删除控件关联的文本区域。

以下是相关代码：

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.
}