TinyMCE с несколькими диалоговыми окнами jQuery разбился

Я столкнулся с какой-то странной проблемой. Даже не знаю, проблема в jQuery или в tinyMCE. Ниже приведен простой код, который его воспроизводит.

Суть проблемы: когда у нас есть несколько диалоговых окон jquery и экземпляр tinymce в одном из них, тогда, когда второй диалог получает фокус, tinymce застревает и его iframe становится пустым.

  1. введите текст в области редактора tinymce (чтобы увидеть, когда он исчезнет)
  2. щелкните заголовок диалогового окна 1 (tinymce теряет контроль, jquery получает его)
  3. щелкните заголовок диалогового окна 2 или его область ввода (проблема). После этого редактор не работает, попытка tinymce.remove (0) дает ошибку, успешно удаляет экземпляр редактора из списка, но оставляет визуальный элемент включенным. экран.

последние версии jQuery и tinyMCE
FireFox 29.01, Opera 12.17, MSIE 9, Safari 5.1.7 // Win7

    <!DOCTYPE html>
    <html>
    <head>
        <title>test</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.4/themes    /redmond/jquery-ui.css"/>
        <script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
        <script type="text/javascript" src="//tinymce.cachefly.net/4.0/tinymce.min.js"></script>
        <script type="text/javascript" src="//tinymce.cachefly.net/4.0/jquery.tinymce.min.js"></script>
        <script type="text/javascript">
            $(function() {
                var dlg1 = $("<div>")
                    .attr('id', 'dlg1')
                    .append($("<textarea>").width('100%').height(200))
                    .dialog({
                        title: 'Dialog 1',
                        width: 600,
                        height: 400,
                        position: [ 50, 50 ]
                    });

                var dlg2 = $("<div>")
                    .attr('id', 'dlg2')
                    .append($("<input>").attr('type', 'text'))
                    .dialog({ title: 'Dialog 2' });

                dlg1.children('textarea').tinymce({ mode: 'none' });
            });
        </script>
    </head>
    <body>
    </body>
    </html>

Есть какие-нибудь версии, что с этим делать?

WBW, Антон


jquery tinymce jquery-ui tinymce-4
person AJG    schedule 11.06.2014    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Нашел.

Виджет диалога пользовательского интерфейса jQuery не использует z-index. Он перемещает диалоги наверх, перемещая все видимые элементы после виджета наверх, делая виджет последним элементом html. (В более старых версиях jQuery UI использовалось appendTo ('body')). Когда элемент iframe повторно присоединяется к документу, это вызывает перезагрузку содержимого iframe, что нарушает привязки tinyMCE.

Этот простой обходной путь не является общим, он гарантированно работает только в моем случае. Но может быть полезным в качестве примера, если у кого-то такая же проблема.

jQuery.ui.dialog.prototype._moveToTop = function(event, silent) {
    var move = (this.element.css('z-index') != 1000);
    $('.ui-dialog:visible').not(this.widget()).css('z-index', 'auto');
    this.widget().css('z-index', 1000);
    if(move && !silent) {
        this._trigger('focus', event);
    }
    return move;
}
person AJG    schedule 16.06.2014

arrow_upward
0
arrow_downward

Небольшое изменение AJG, но у меня были проблемы с диалогами, которые затем появлялись за модальными окнами. Это хорошо сработало для меня с несколькими диалоговыми окнами и редакторами tinymce.

Изменить: TinyMCE версии 4.1.5 и jQuery версии 1.9.1

jQuery.ui.dialog.prototype._moveToTop = function(event, silent) {
    var move = (this.element.css('z-index') != 1000);
    $('.ui-dialog:visible').not(this.widget()).css('z-index', '200');
    this.widget().css('z-index', 1000);
    if(move && !silent) {
        this._trigger('focus', event);
    }
    return move;
}
person Fairwyn    schedule 15.09.2014