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

Question

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

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

Я наконец нашелпричина здесь, в конце статьи: 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,Это то, что увидит пользователь.

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