javascript - 在模态窗口中使用 tinyMCE

Question

我正在使用 Grails 1.3.7 并通过 richui 使用 tinyMCE。我正在尝试显示一个模态窗口，使用户能够发送邮件。但是，如果 tinyMCE 正确显示，我将无法使用文本编辑器，因为这个错误:

t.win.document is null

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

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

J查询代码:

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。这就是用户将看到的内容。

Answer 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");
    });

对话框关闭后，您可以使用以下方法从文本区域中删除 tinyMCE 控件:

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