Question

我在一个bootstrap Modal中有一个TinyMce实例当我点击＆＃34;插入/编辑链接＆＃34;按钮，模态打开正确但文本字段不可聚焦

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

Answer 1

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

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

在引导程序模式中（也是on TinyMCE's website）

// 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中（也是on GitHub，还有related discussion）

$.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);
            };
        }
    }
});

显然，如上所述，您应该将.container-of-dialog-i-want-to-be-able-to-use替换为......您猜对了......对话框容器的选择器。这个想法是模态将仍阻止所有聚焦在模态之外，除非你试图集中在你指定的其他'可接受'容器内。

我不是100％确定是否有一个单选择器可以捕获所有产生的TinyMCE对话框，但是对于我的用途 - 我特意在WordPress的链接面板中使用它 - 我成功地使用.mce-container, #wp-link-wrap作为选择器。

Answer 2

我对这则帖子迟到了，但我想分享我对这个问题的经验。我需要为我的项目实现react-bootstrap和tinymce。 @Pete已经解释了这个原因：“引导程序将焦点从tinymce转移了。” 就我而言，我只需要在我的react-bootstrap Modal组件中传递enforceFocus = false。

enforceFocus = true时：模态将阻止焦点在打开时离开模态。考虑在此处保留默认值，因为有必要使Modal与辅助技术（例如屏幕阅读器）一起正常工作。

参考react-bootstrap doc

Answer 3

接受的答案对我不起作用（focusin首先击中了引导程序模式），这是我的解决方案：

    var modal = $('.modal:visible');
    modal.one('hidden.bs.modal', function() {
        tinymce.remove('textarea.mce-small');
    });
    $(document).off('.tinymodal').on('focusin.tinymodal', function(e) {
        var dialog = $(e.target).closest(".tox-dialog");
        if (dialog.length && modal.find(dialog).length === 0) {
            var wrapper = $('.tox-tinymce-aux');
            modal.append(wrapper);
        }
    });

插入/编辑链接模式文本字段无法集中在TinyMce Wordpress上

3 个答案: