Question

我遇到了一些奇怪的问题。我甚至不知道，是jQuery还是tinyMCE中的问题。下面是重现它的简单代码。

问题的实质：当我们有多个jquery对话框，并且其中一个有一个tinymce实例时，那么，当第二个对话框获得焦点时，tinymce会卡住并且其iframe变空。

在tinymce编辑器区域输入一些文本（以查看它何时消失）
点击对话框1的标题栏（tinymce失去控制，jquery得到它）
点击对话框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，安东

Answer 1

找到它。

jQuery UI对话框小部件不使用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;
}

Answer 2

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;
}

带有多个jQuery对话框的TinyMCE崩溃了

2 个答案: