Question

55

Remove TinyMCE control and re-add

rated 0 times [ 59] [ 4] / answers: 1 / hits: 16055 / 12 Years ago, tue, april 10, 2012, 12:00:00

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kaceyr

Add To Favorites

Follow

Total Points: 510

Total Questions: 97

Total Answers: 116

Location: Solomon Islands

Member since Fri, Oct 8, 2021

3 Years ago

kaceyr questions

1 TypeScript Expected 1 arguments, but got 2

Wed, Dec 15, 21, 00:00, 3 Years ago

1 How to show input fields based on mat radio button selection in angular material

Wed, Jun 24, 20, 00:00, 4 Years ago

1 How to change variable value in index.html based on the environment in angular

Thu, Feb 6, 20, 00:00, 4 Years ago

1 react dynamic import using a variable doesn't work

Sat, Oct 12, 19, 00:00, 5 Years ago

1 puppeteer-cluster: queue instead of execute

Mon, Aug 5, 19, 00:00, 5 Years ago

View All

answered 12 Years ago tyasiaalmap · Accepted Answer

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.

}