Използване на tinyMCE в модален прозорец

Използвам Grails 1.3.7 и използвам tinyMCE чрез richui. Опитвам се да покажа модален прозорец, който позволява на потребителите да изпращат имейл. Въпреки това, ако 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%"/>

В обобщение, ако открия, че трябва да изпратя първи имейл, страницата създава div, в който се поставя tinyMCE. Това е, което потребителят ще види.


javascript grails jquery tinymce
person JackRackham    schedule 13.12.2011    source източник

Отговори (1)


arrow_upward
0
arrow_downward

Както споменахте, причината за грешката „t.win.document е нула“ е, че DOM не е обновен. Така че ще трябва изрично да добавите контролата tinyMCE, когато зареждате модалния диалог. Можете да използвате нещо подобно в gsp, който изобразява richUI редактора (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");
person Anuj Arora    schedule 26.12.2011