当使用 jquery modal dialog 和 MVC.net 时 TinyMCE 附加然后消失

Posted 2023-05-09

【中文标题】当使用 jquery modal dialog 和 MVC.net 时 TinyMCE 附加然后消失

【英文标题】：TinyMCE attaches then disappears when using jquery modal dialog and MVC.net

【发布时间】：2011-12-23 12:05:39

【问题描述】：

我有一个 MVC.net 页面，其中有一个打开 jquery 模式对话框的按钮。我像这样打开我的对话框

$(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 是一个存在于我的部分中的函数，部分是模态的内容。添加小 MCE 代码如下所示

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 是我为一些自定义操作创建的 tinyMCE 按钮。

当我单击主页上的按钮打开对话框时，对话框会按预期打开，但 tinymce 编辑器会在部分对话框弹出窗口中对 textarea 闪烁，然后返回到正常的 textarea。部分还有一个下拉列表，当更改时，更新 tinymce 文本区域 (ajax) 的内容，并且再次显示文本区域并附加了 tinymce 编辑器，然后返回到普通文本区域。

此外，由于这是一个模态对话框，何时应调用以下命令来创建和添加自定义按钮。

tinymce.create
tinymce.PluginManager.add

当我尝试将编辑器附加到主页中的文本区域时，一切正常（编辑器附加到文本区域，自定义按钮显示并正常运行）。

有什么建议吗？

我使用的是 jquery 版本的 tinymce 编辑器。

编辑：

我最终还是重新使用了 tinyMCE 的 jquery 版本，因为它在 UI Dialog 中的运行要比标准版本好得多。

我已经成功地正确加载了我的自定义按钮，并且当我关闭并打开对话框时编辑器可用。

我剩下的唯一问题是在第一次打开对话框时，tinyMCE 附加到 textarea 然后消失。我决定在我的文档准备功能中加入

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

这可行，有趣但不是解决方案。 所以这里似乎存在时间问题。

如何确保 textarea 已准备好接受 tinymce 编辑器，或者 tinymce init 是否过早触发？

【参考方案1】：

我没有使用过 jQuery 版本，所以这是在黑暗中拍摄的。普通版本不能通过 Ajax 延迟加载。

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

我使用的 hack 没有经过广泛测试，运行如下：

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

【参考方案2】：

jQuery tinymce 构建是问题的根源，而且速度很慢。我建议使用常规的 tinymce 构建并额外加载 jQuery。

自定义按钮应在初始化时进行初始化。这可以使用自己的插件或 setuop 初始化参数来完成。

【讨论】：

我重新使用标准 tinyMCE 编辑器，第一次打开模式时效果很好，但第二次打开时，编辑器无法正确附加到文本区域，当我点击我的自定义按钮，我得到两个下拉列表。就像每次我打开对话框时它都会初始化一个新的 tinymce 编辑器，而旧的并没有被杀死？

没错，您必须使用以下命令正确关闭“旧的”：tinymce.execCommand('mceRemoveControl',true,'editor_id');

我添加了 close: function () tinymce.execCommand('mceRemoveControl', true, '#emailMessage');到我的对话框关闭功能，但编辑器仍然以相同的方式运行，没有正确初始化（第一次打开后），如果我打开和关闭 UI 对话框 3 次，我会在 tinymce 编辑器自定义按钮中获得 3 个重复的下拉菜单（这就是我开始研究 jQuery 版本的原因）。

嗯，这听起来很奇怪。你能打开一个 jsfiddle.com 演示吗？这会有所帮助

当我尝试在我的部分组件返回的失败代码中提交数据时，我还在 firebug 中看到一个错误：0x8000ffff (NS_ERROR_UNEXPECTED) [nsIDOMHTMLDocument.implementation]。当我尝试 tinyMCE.triggerSave(); 时发生错误不好意思，没用过jsfiddle.com是什么？