【问题标题】：TinyMCE editor inside jQuery dialog autoscrolls top when unfocusing the editorjQuery 对话框中的 TinyMCE 编辑器在不聚焦编辑器时自动滚动到顶部
【发布时间】：2015-12-20 14:41:10
【问题描述】：

我在 jQuery 对话框中使用 TinyMCE 文本编辑器时遇到问题。每当文本编辑器的 textarea 聚焦而我取消聚焦时，页面就会滚动到对话框的顶部。这显然仅在页面可滚动且页面当前未滚动到顶部时才会发生。总是在 Firefox 中出现，有时在 Chrome 中出现。

https://jsfiddle.net/dqrarcv3/

要对其进行测试，请确保结果窗口可滚动且未滚动到顶部。

重现步骤：

聚焦文本编辑器的文本区域
点击外部

或者

聚焦文本编辑器的文本区域
单击上下文菜单（例如文件）
将鼠标悬停在另一个上下文菜单上（例如编辑）

简化的 HTML：

<div id="dialog">
    <div style="height:100px">
        Lorem ipsum lorem ipsum Lorem ipsum
        lorem ipsum Lorem ipsum lorem ipsum
    </div>
    <textarea id="editor"></textarea>
</div>

简化的 JavaScript：

$(document).ready(function () {
    $("#dialog").dialog({
        autoOpen: true,
        width: "auto",
        position: {
            my: "center top",
            at: "center top",
            of: window
        },
        modal: true
    });

    $("#editor").css("height", "250px");
    tinymce.init({
        selector: "#editor"
    });
});

似乎不聚焦使 TinyMCE 聚焦对话框的关闭按钮，然后使页面滚动到它。如果对话框没有任何按钮，而是有一些输入元素，它会关注第一个。

我已经在 TinyMCE 代码中找到了发生这种情况的位置，但注释该函数并不能解决问题。

d.on("focusout", function() {
    console.log("FOCUSOUT");
    window.setTimeout(function() {
        var t = e.focusedEditor;
        u(s()) || t != d || (d.fire("blur", {
            focusedEditor: null
        }), e.focusedEditor = null, d.selection && (d.selection.lastFocusBookmark = null))
    }, 0)
})

任何想法如何解决这种奇怪的行为或实际导致它的原因是什么？

编辑：

仍然有同样的问题。这是问题的 GIF：http://gfycat.com/SneakyImpartialAmazontreeboa

如图所示，当 TinyMCE 编辑器失去焦点（通过单击其他位置或切换上下文菜单）时，对话框中的第一个可聚焦元素获得焦点。我在 TinyMCE 的源代码中添加了“FOCUSOUT”控制台消息，但仍然找不到导致它的原因。

上面的 gif 中使用的确切代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="/js/jquery-ui/css/redmond/jquery-ui-1.10.4.custom.css">
<script src="/js/jquery-1.10.2.js"></script>
<script src="/js/jquery-ui/js/jquery-ui-1.10.4.custom.min.js"></script>
<script src="/js/tinymce/tinymce.min.js"></script>
</head>
<body>

<div id="dialog">
    <p>Lorem ipsum!</p>
    <button>BUTTON</button>
    <p>...text...</p>
    <p>...text...</p>
    <p>...text...</p>
    <p>...text...</p>
    <textarea id="editor" rows="5"></textarea>
</div>

<script>
$(document).ready(function()
{
    $("#dialog").dialog(
    {
        autoOpen: true,
        modal: true,
        width: window.innerWidth / 1.75,
        position: { my: "center top", at: "center top", of: window },
    });
    tinyMCE.init(
    {
        selector: "#editor"
    });

    $(".ui-dialog-titlebar").hide(); // Hide dialog titlebar
    $(".ui-dialog").css("border", "1px solid black"); // Add border
});
</script>

</body>
</html>

【问题讨论】：

它在这里工作 - 没有一个场景可以复制（chrome，ubuntu）
奇怪，几个小时后我会在 Ubuntu 上试用。
@davidkonrad 现在用 Ubuntu 测试。仍然 100% 可在 Firefox 中重现，但在 Chrome 中随机发生且很少发生，显然只有在上下文菜单的第二种方法中才会发生。

标签： jquery dialog modal-dialog tinymce jquery-ui-dialog

【解决方案1】：

尝试注释掉 modal: true

$("#dialog").dialog({
    autoOpen: true,
    width: "auto",
    position: {
        my: "center top",
        at: "center top",
        of: window
    },
    //modal: true
});

https://jsfiddle.net/dqrarcv3/6/

修复了FF中的问题

【讨论】：

【解决方案2】：

用户界面想要专注于对话框中的任何内容，并且当 tiny 失去焦点时，它会专注于对话框中的第一个对象，并且浏览器会自动滚动到它。

所以你需要在 UI 对话框中禁用自动对焦。

$.ui.dialog.prototype._focusTabbable = $.noop;

【讨论】：