使用 tinyMCE 进入模态窗口答案

【问题标题】：Using tinyMCE into modal window使用 tinyMCE 进入模态窗口
【发布时间】：2011-12-13 09:37:56
【问题描述】：

我正在使用 Grails 1.3.7，并通过 Richui 使用 tinyMCE。我正在尝试显示一个模式窗口，使用户能够发送邮件。但是，如果 tinyMCE 正确显示，由于此错误，我无法使用文本编辑器：

t.win.document 为空

我终于在这里找到了原因，在文章的最后： 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%"/>

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

【问题讨论】：

标签： javascript jquery grails tinymce

【解决方案1】：

正如您所提到的，错误“t.win.document is null”的原因是因为 DOM 没有刷新。因此，当您加载模态对话框时，您必须显式添加 tinyMCE 控件。您可以在呈现richUI编辑器的gsp中使用类似的东西（在您的情况下为writeFirstMail.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");
    });

关闭对话框后，您可以使用以下命令从 textarea 中删除 tinyMCE 控件：

    tinyMCE.execCommand("mceRemoveControl", false, "yourTextareaId");

【讨论】：