【问题讨论】：
outline css 属性。 什么都没有发生 意味着它不可聚焦？还是无法输入？
medium none 但即使禁用它也没有任何变化。它不可聚焦，因此无法输入任何内容。链接和复选框按预期工作
标签： javascript jquery wordpress tinymce
这里发生的实际问题是大多数模态系统（Bootstrap Modal、Magnific Popup 等）不允许聚焦不是模态子级的表单字段。由于 TinyMCE 将它们的对话框附加到 body 而不是模态窗口，因此它们被认为是在模态窗口之外并防止聚焦。
要允许用户聚焦 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，也可以是 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% 确定是否有一个 single 选择器可以捕获所有产生的 TinyMCE 对话框，但对于我的用途——我专门将它与 WordPress 的链接面板一起使用——我成功使用了.mce-container, #wp-link-wrap 作为选择器。
【讨论】：
接受的答案对我不起作用（首先关注引导模式），这是我的解决方案：
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);
}
});
【讨论】：
我迟到了这篇文章，但我想分享我对这个问题的经验。
我需要为我的项目实现 react-bootstrap 和 tinymce。
@Pete 已经解释了原因：“引导程序从 tinymce 获得焦点。”
就我而言，我只需要在我的 react-bootstrap 模态组件中传递enforceFocus = false。
当enforceFocus = true：模态将阻止焦点在打开时离开模态。考虑在此处保留默认值，因为有必要使 Modal 与辅助技术（例如屏幕阅读器）很好地配合使用。
【讨论】：