使用tinyMCE进入模态窗口

Using tinyMCE into modal window

本文关键字：模态 窗口 tinyMCE 使用      更新时间：2023-09-26

我使用Grails 1.3.7，并通过richui使用tinyMCE。我试图显示一个模态窗口，使用户能够发送邮件。但是，如果tinyMCE正确显示，我就不能使用文本编辑器，因为有以下错误:

t.win。文件为空

我终于找到了原因，在文章的最后:http://blog.mirthlab.com/2008/11/13/dynamically-adding-and-removing-tinymce-instances-to-a-page/似乎当我用jquery脚本构建模态窗口调用页面时，DOM没有刷新，也没有创建相应的文本区域。

无论如何我不知道如何解决这个问题，所以这里是我的代码:

Jquery代码: 
function dialogSendFirstMail(id) {
var monurl = "/myApp/emailTemplate/writeFirstMail.gsp?id_for_mail="+id;
var titre = "Premier email"
//alert(monurl);
$("#dialogSendFirstMail").load(monurl, function() {
    $(this).dialog({
        height: 'auto',
        width:'auto',
        modal: true,
        position: 'center',
        overlay: {
            backgroundColor: '#000',
            opacity: 0.5
        },
        title:titre
    });
});
}

GSP调用模式窗口脚本:

<!-- ... -->
<g:if test="${params.sendFirstMail}" >
  <div id="dialogSendFirstMail"></div>
  <script>dialogSendFirstMail(${idProfil});</script>
</g:if>
</body>

模态窗口(暂时如此):

<richui:richTextEditor name="firstMail" value="%Email_de_bienvenue%"/>

总之，如果我检测到我必须发送第一封邮件，页面将创建一个div，其中放置tinyMCE。这是用户将看到的

正如您所提到的，您看到错误" .win "的原因。document is null"是因为DOM没有刷新。因此，在加载模态对话框时，必须显式地添加tinyMCE控件。您可以在渲染richi编辑器(writeFirstMail)的gsp中使用类似的东西。GSP(你的情况):

    jQuery(document).ready(function() {
    //your tinyMCE settings here 
    tinyMCE.settings = {
        mode : "textareas",
        theme : "simple",
        editor_selector : "mcesimple",
        width: 400
    };
    tinyMCE.execCommand("mceAddControl", false, "yourTextareaId");
    });

一旦对话框被关闭，你可以使用下面的命令从文本区移除tinyMCE控件:

    tinyMCE.execCommand("mceRemoveControl", false, "yourTextareaId");
相关文章：