插入/编辑链接模态文本字段无法聚焦 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);
            };
        }
    }
});

显然，如上所述，您应该将

.container-of-dialog-i-want-to-be-able-to-use

替换为...您猜对了...对话框容器的选择器。这个想法是，模态将“仍然”阻止所有聚焦在模态之外，除非您试图将焦点集中在您指定的其他“可接受的”容器内。 我不是 100% 确定是否有一个

single

选择器可以捕获所有生成的 TinyMCE 对话框，但就我的用途而言——我专门将它与 WordPress 的链接面板一起使用——我成功地使用了 .mce-container, #wp-link-wrap 作为选择器。

Answer 2

MUI 用户好。很多人都会遇到这样的问题，特别是当您在 MUI

<Dialog>

组件中使用 TinyMCE 编辑器时。您要寻找的是包含 TinyMCE 组件的

disableEnforceFocus

组件上的

<Dialog>

属性。像这样：

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

希望这有帮助！

Answer 3

    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 4

enforceFocus = false

。

当

enforceFocus = true

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

参考。

react-bootstrap 文档

Answer 5

tinymce.init({
    // other init code goes here
    // ....
    setup: function(editor) {
        // This is the key part - it's hiding the overflow of the
        // Bootstrap modal window, since that's what was blocking
        // input focusability in my case
        editor.on("OpenWindow",function(){
            $(".modal").css({
                "overflow-x":"hidden",
                "overflow-y":"hidden"
            });
            
            // Returning the focus to the first input
            if($(".tox-dialog input").length > 0) {
                $(".tox-dialog input").first().focus();
            }
        });

        // Once the overlaying TinyMCE modal window closes
        // return everything as it was
        editor.on("CloseWindow",function() {
            $(".modal").css({
                "overflow-x":"",
                "overflow-y":""
            });
        });
    }
});

解决方案本身可以改进 - 因为现在只是这样：

以

.modal
• 类为目标，这可能不是最好的解决方案 - 在这种情况下，需要进行一些调整来检查从 TinyMCE 启动的地方有多少个祖先模态它试图将焦点强制放在
.tox-dialog
• 模式窗口中找到的第一个输入上，无论该输入位于 DOM 层次结构中的哪个位置，也无论该输入是否可聚焦（例如，不检查它是否被禁用）或可见（同样，没有类型检查 - 例如，如果遇到

  type="hidden"

  怎么办？）