TinyMCE attaches then disappears when using jquery modal dialog and MVC.net

Question

I have an MVC.net page with a button that opens a jquery modal dialog. I open my dialog like this

$(dialogId).dialog(
            {
                dialogClass: 'test', closeOnEscape: true,
                title: title,
                height: height,
                width: width,
                minHeight: minHeight, maxHeight: maxHeight,
                minWidth: minWidth, maxWidth: maxWidth,
                resizable: resizable,
                modal: true,
                show: 'blind',
                hide: 'blind',
                open: addTinyMCE
            });

addTinyMCE is a function that lives in my partial and the partial is the content for the modal. The add tiny MCE code looks like this

function addTinyMCE() {
        $('#emailMessage').tinymce({
            script_url: '/Scripts/tiny_mce/tiny_mce.js',

            theme: "advanced",
            plugins: "myButton,autolink,lists,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",

            theme_advanced_buttons1: "xedomenubutton,undo,redo,bold,italic,underline,|,justifyleft,justifycenter,justifyright,justifyfull",
            theme_advanced_buttons2: "formatselect,fontselect,fontsizeselect",
            theme_advanced_buttons3: "bullist,numlist,|,outdent,indent,|,link,unlink,anchor,image,|,insertdate,inserttime,|,forecolor,backcolor,|,fullscreen",
            theme_advanced_toolbar_location: "top",
            theme_advanced_toolbar_align: "left",
            theme_advanced_resizing: true,

            skin: "o2k7",

            template_external_list_url: "js/template_list.js",
            external_link_list_url: "js/link_list.js",
            external_image_list_url: "js/image_list.js",
            media_external_list_url: "js/media_list.js"            
        });
    }

myButton is a tinyMCE button which I have created for some custom actions.

When I click the button on my main page to open the dialog, the dialog opens as expected but the tinymce editor flashes against the textarea within the partial dialog popup and then returns to a normal textarea. The partial also has a drop down list that when changed, updates the content of the tinymce textarea (ajax) and again, the textarea appears with the tinymce editor attached and then returns to a normal textarea.

Also, with this being a modal dialog, when should the following commands be called to create and add the custom button.

tinymce.create
tinymce.PluginManager.add

When I try attaching the editor to a textarea in my main page, everything works as expected (editor attaches to text area, custom button is displayed and functions correctly).

Any suggestions?

I'm using the jquery version of the tinymce editor.

EDIT:

I eventually went back to using the jquery version of tinyMCE as it was functioning far better with the UI Dialog than the standard version.

I've managed to get my custom button loading in correctly and the editor is available when i close and open the dialog.

The only issue i'm left with is that on first open of the dialog, tinyMCE attaches to the textarea and then vanishes. I decided to put within my document ready function

setTimeout(function () { initTinyMCE(); }, 500);

and this works, interesting but not a solution. So it seems that there is a timing issue here.

How can I ensure that the textarea is ready to take the tinymce editor or is the tinymce init firing too early?

jbrookover jbrookover · Accepted Answer · 2011-11-07T10:16:08

I haven't used the jQuery version, so this is a shot in the dark. The regular version cannot be lazily loaded via Ajax.

http://tinymce.moxiecode.com/forum/viewtopic.php?pid=66531#p66531

The hack I've used, which has not been extensively tested, is run this:

window.tinyMCEPreInit = {base : 'your/js/folder/tinymce', suffix : '', query : ''};
// Lazily load your TinyMCE javascript
window.tinymce.dom.Event.domLoaded = true;

TinyMCE attaches then disappears when using jquery modal dialog and MVC.net

2 Answers