插入/编辑链接模式文本字段无法聚焦 TinyMce Wordpress

Question

我在 bootstrap Modal 中有一个 TinyMce 实例。
当我单击“插入/编辑链接”按钮时，模态正确打开但文本字段不可聚焦

该复选框正确交互，但如果我单击输入字段，则没有任何反应。想法？

Answer 1

这里发生的实际问题是大多数模态系统（Bootstrap Modal、Magnific Popup 等）不允许聚焦不是模态子项的表单字段。由于 TinyMCE 将它们的对话框附加到body模态窗口而不是模态窗口，因此它们被认为是在模态之外，并且无法聚焦。

要允许用户聚焦 TinyMCE 对话框字段，您需要明确告诉您的模态系统允许聚焦在这些额外的对话框中。

在 Bootstrap Modals（也在TinyMCE 的网站上）

// Prevent bootstrap dialog from blocking focusin
$(document).on('focusin', function(e) {
    if ( $(e.target).closest(".container-of-dialog-i-want-to-be-able-to-use").length ) {
        e.stopImmediatePropagation();
    }
});

在 Magnific Popup（也在GitHub 上，也有相关讨论）

$.magnificPopup.open({

    /** settings **/
    callbacks: {
        open: function() {
            $.magnificPopup.instance._onFocusIn = function(e) {

                // Do nothing if target element is select2 input
                if( $(e.target).closest( '.container-of-dialog-i-want-to-be-able-to-use' ) ) {
                    return true;
                }

                // Else call parent method
                $.magnificPopup.proto._onFocusIn.call(this,e);
            };
        }
    }
});

Obviously, as stated, you should replace .container-of-dialog-i-want-to-be-able-to-use with...you guessed it...the selector for your dialog's container. The idea is that the modal will still prevent all focusing outside of the modal, UNLESS you're trying to focus within the other 'acceptable' containers you've specified.

I'm not 100% sure if there's a single selector that will capture all TinyMCE dialogs that ever spawn, but for my uses--and I was specifically using this with WordPress's link panels--I had success with using .mce-container, #wp-link-wrap as the selectors.