TinyMCE attaches then disappears when using jquery modal dialog and MVC.net
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?
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;
The jQuery tinymce build is a source of problems and it is slow. I advise to to use the regular tinymce build and addionally loading jQuery.
The custom button should be initialized at initialization. THis can be done using an own plugin or the setuop initialization paramter.
链接地址: http://www.djcxy.com/p/61468.html