删除TinyMCE控件并重新添加 [英] Remove TinyMCE control and re-add

问题描述

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

我如何删除tinyMCE然后重新添加它？

  tinymce.EditorManager.execCommand（'mceRemoveControl'，true，editor_id）; 
  

以及我的具体情况：

<$ p $如果我在这里抛出一个警报，它会被调用，所以我知道它不是空的
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未定义'的错误 为了以防万一，这是init之后DOM的相关部分。

 < textarea id =main-textstyle =display：none;咏叹调隐藏= 真 >< / textarea的> 
 < span id =main-text_voiceclass =mceVoiceLabelstyle =display：none;> Rich Text Area< / span> 
< table id =main-text_tblclass =mceLayoutcellspacing =0cellpadding =0role =presentationstyle =width：100％; height：400px;> 
< tbody> 
< tr class =mceFirstrole =presentation> 
< td class =mceToolbar mceLeft mceFirst mceLastrole =presentation> 
< div id =main-text_toolbargrouparia-labelledby =main-text_toolbargroup_voicerole =grouptabindex = -  1> 
< span role =application> 
< / div> 
< a onfocus =tinyMCE.getInstanceById（'main-text'）。focus（）; title =跳转到工具按钮 -  Alt + Q，跳转到编辑器 -  Alt-Z，跳转到元素路径 -  Alt-Xaccesskey =zhref =＃>< / a> 
< / td> 
< / tr> 
< tr> 
< tr class =mceLast> 
< / tbody> 
< / table> 
< / span> 
  

解决方案

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

$ p
$ b

  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'））; 
 //我通常只是做$（＃main-text）。remove（）;但是你指定不使用jquery，所以如果main-text-parent被替换为主文本的父容器，理论上它应该将其删除。 
} 
  

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.

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.

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'

Just in case, this is the relevant part of the DOM after the init.

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

解决方案

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.

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

这篇关于删除TinyMCE控件并重新添加的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！