How to keep TinyMCE after postback in an UpdatePanel

Question

When I click a button that causes a postback on the UpdatePanel it calls the tinyMCE.triggerSave() .

It reloads the panel and the editor show up again, but when I try to call tinyMCE.triggerSave() the second time I get the following error:

g.win.document is null

I though it was getting the old instance, but I'm also removing the control ( tinyMCE.execCommand('mceRemoveControl',false,'Editor'); ) after I call the save. Even so it still crashes the second time.

How should I fix it?

Answer 1

tinyMCE.execCommand('mceRemoveControl',true,'Editor');

Before leaving the UpdatePanel, it will force tinyMCE to remove completely and then when you add again it won't crash.

Answer 2

After much confusion I discovered that the fix which @André Gadonski posted no longer works in TinyMCE version 4. Not only does it not work, it provides no error feedback to the console!

The new command is mceRemoveEditor

Source: http://www.tinymce.com/forum/viewtopic.php?id=31256

I found that this can either be used directly before re-initalising TinyMCE or just before the ASP update panel is refreshed using;

var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_beginRequest(BeginRequestHandler);

function BeginRequestHandler(sender, args) {
    tinymce.execCommand('mceRemoveEditor', true, 'EditorID');
}

Answer 3

For tinymce 3.2.x, use the following to remove tinyMCE instance in IE8 or any other browser. As tinymce.execCommand function makes input fields uneditable in IE8.

tinyMCE.remove(editor); //editor is instance of tinymce editor and not editor id

This will fix "Permission Denied" error without disabling other input fields in the same page.

Answer 4

i have same problem.for fix it you mast add script code for element create post back . my button create post back,I add it OnClientClick() :

<asp:LinkButton ID="lbnSave" OnClick="lbnSave_Click" ToolTip="Add New" OnClientClick="dotim()"
                        runat="server">save</asp:LinkButton>

and script is:

function dotim() {
   tinyMCE.triggerSave();
  } // this is my attempt at a fix

Answer 5

It was so helpful for me.

I was using tinymce in angular 2. But when I was redirected the tinymce was disappeared. I guess it's because of reusing tinymce. So I removed the tinymce before using.

tinymce.execCommand('mceRemoveEditor', true, 'templateEditor');
  tinymce.init({
    selector: '#templateEditor',
    menubar: false,
    plugins: ['autoresize']
  });

Thank you.