Insert/Edit link 模态文本字段无法聚焦 TinyMce Wordpress

Question

我在 bootstrap Modal 中有一个 TinyMce 实例。
当我单击 "Insert/Edit Link" 按钮时，模式正确打开但文本字段不可聚焦

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

Answer 1

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

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

在Bootstrap模态（也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, also 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 替换为...您猜对了...对话框容器的选择器。这个想法是模态将仍然阻止所有聚焦在模态之外，除非你试图在你指定的其他 'acceptable' 容器内聚焦。

我不是 100% 确定是否有一个 single 选择器可以捕获所有曾经产生的 TinyMCE 对话框，但为了我的使用——我专门将它与WordPress 的 link 面板——我成功地使用 .mce-container, #wp-link-wrap 作为选择器。

Answer 2

已接受的答案对我不起作用（首先关注 bootstrap 模态），这是我的解决方案：

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

Answer 3

我迟到了 post，但我想分享我对这个问题的经验。我需要为我的项目实施 react-bootstrap 和 tinymce。 @Pete 已经解释了原因：“bootstrap 从 tinymce 获取焦点。” 就我而言，我只需要在我的 react-bootstrap 模态组件中传递 enforceFocus = false。

当enforceFocus = true时：模态框将防止焦点在打开时离开模态框。考虑在此处保留默认值，因为有必要使模态框与辅助技术（例如屏幕阅读器）很好地配合使用。

参考react-bootstrap doc

Answer 4

对于 Material UI 用户

你好 MUI 用户。许多人对此会有疑问，尤其是当您在 MUI <Dialog> 组件中使用 TinyMCE 编辑器时。您正在寻找的是包含您的 TinyMCE 组件的 <Dialog> 组件上的 disableEnforceFocus 道具。像这样：

  <Dialog
    disableEnforceFocus
    ...
    >
     <Editor />
  </Dialog>

希望对您有所帮助！

Insert/Edit link 模态文本字段无法聚焦 TinyMce Wordpress

Insert/Edit link modal text fields can't be focused TinyMce Wordpress

javascript

wordpress

jquery

tinymce

对于 Material UI 用户