Использование tinyMCE в модальном окне

Я использую Grails 1.3.7 и tinyMCE через Richui. Я пытаюсь отобразить модальное окно, которое позволяет пользователям отправлять почту. Однако, если tinyMCE отображается правильно, я не могу использовать текстовый редактор из-за этой ошибки:

t.win.document имеет значение null

Наконец-то я нашел причину здесь, в конце статьи: -page/" rel="nofollow">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. Это то, что увидит пользователь.


person JackRackham    schedule 13.12.2011    source источник


Ответы (1)


Как вы упомянули, причина, по которой вы получаете ошибку «t.win.document is null», заключается в том, что 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