Jquery 文本框在TinyMCE模式框中不可单击

我正在为一个客户端开发一个面板，其中有一个“新建博客帖子”按钮，可以打开一个模式，在该模式下，可以单击一个“添加图像”框，打开另一个模式。这里的问题是，“添加图像”模式框包含文本框，这些文本框应该是可单击的，但是，它们不是

我在试验Z-Index，看看这是否是问题所在，但是，我没有解决问题的运气

这些模态包括引导和TinyMCE（用于编辑）

可以在此处找到：：在“美国网站”选项卡下，单击“添加博客文章”，然后单击“文章”区域工具栏上的“插入”选项卡和“插入图像”

很抱歉，这个问题令人困惑，但希望它很容易解决

---

编辑：我尝试了另一个名为“CKEDITOR”的应用程序，出现了完全相同的问题，这是由于3个模态相互重叠造成的吗？？？

在查看了您所说的插入图像后，我还发现这与视频的行为相同。这让我相信原因是因为你需要使用一个文件管理器插件来处理TinyMCE中的文件，比如

一旦您有了这些功能，您的图像/视频窗口将如下所示：

然后您将能够选择并接受文件。
以下是该页面的官方答案：

---

由于您使用的是引导（也适用于jQuery UI对话框），TinyMCE模式窗口在启动时会失去焦点，因此无法在内部单击。下面的代码将防止这种情况发生

TinyMCE代码部分：

tinymce.init({
    selector: "textarea",
    plugins: [
    "advlist autolink link image lists charmap print preview hr anchor pagebreak",
    "searchreplace visualblocks visualchars code fullscreen insertdatetime media
     nonbreaking",
    "save table contextmenu directionality emoticons paste textcolor"
   ],
   toolbar: "insertfile undo redo | styleselect | bold italic | 
alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | 
link image | print preview media fullpage | forecolor backcolor emoticons", 
   style_formats: [
        {title: 'Bold text', inline: 'b'},
        {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
        {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
        {title: 'Example 1', inline: 'span', classes: 'example1'},
        {title: 'Example 2', inline: 'span', classes: 'example2'},
        {title: 'Table styles'},
        {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
    ]
});

JQuery模态焦点修复程序：

// prevent Bootstrap from hijacking TinyMCE modal focus    
$(document).on('focusin', function(e) {
  if ($(e.target).closest(".mce-window").length) {
    e.stopImmediatePropagation();
  }
});

---

永恒的一小时解决方案成功了。然而，我不得不挖掘并更改我的引导设置。由于我的页面使用的是Bootstrap（v3.3.7），所以我必须执行以下操作

在bootstrap.js文件中查找

focusin

事件

查找本文中引用的函数，其中调用了引导模式

测试将代码段添加到函数中的修复程序

成功测试后，您应该修改缩小的文件，以防将其添加到项目中，但要小心（我是手动完成的）

结果:

Modal.prototype.enforceFocus = function () {
$(document)
  .off('focusin.bs.modal') // guard against infinite focus loop
  .on('focusin.bs.modal', $.proxy(function (e) {
    //IMPORTANT: I had To remove the following commented code block, which was the 
    // original code before the fix  
    /*
         if (document !== e.target && this.$element[0] !== e.target && 
         !this.$element.has(e.target).length) { this.$element.trigger('focus') 
         } 
    */
  if ($(e.target).closest(".mce-window").length){
    e.stopImmediatePropagation();
  }
  }, this))

}

---

通过删除代码并添加接受的解决方案，我能够单击并编辑输入字段，在我的例子中，输入字段是超链接字段。我在Edge、Firefox和Chrome上进行了测试，效果良好

问题：

如果您有一个内部带有TinyMCE的引导模式，并且您希望在其中插入一个链接或其他选项，以打开带有文本输入字段的TinyMCE对话框，则无法将焦点放在输入文本字段上（就像它处于禁用状态一样）

解决方案：

---

从引导模式html中删除tabindex=“-1”。这可以在模式html容器中完成，也可以在TinyMCE初始化之前完成。

请在此处发布相关代码片段，好吗？我想我知道答案，但我无法查看250行代码以确保它正常工作。给你。显然，我无法将此链接添加到我的描述中，因为它没有附带代码。我不确定问题的位置，因此我无法在主帖子上显示具体代码。谢谢奥利弗，我会看一看。我注意到的一件事（这不是解决方案）是，输入没有任何“type”属性。Hmmm，但它不仅是带有此错误的源框，还有图像描述框和尺寸。很抱歉让你感到痛苦，但我感觉还有别的事情要做：/我真的很感谢你抽出时间。我会给你一个+1，考虑到这是一个可行的选择，你在这个问题上花了很多时间，我很确定“源”框可以是粘贴的url，而不是使用管理器。可能还有更多，很难说。但看看这个：。我想，一旦你能让源字段工作起来，你肯定会知道的。太棒了。我会调查的。非常感谢。好极了非常感谢。当我可以的时候，我会赏金的：）谢谢，很高兴你现在能从这个奇怪的问题上继续前进。：）感谢您提供了漂亮的解决方案。在tinyMCE（>5.0）的较新版本中，您需要查找

$（e.target）.最接近的（“.tox”）.length

，以防有人对

codesample

插件有此问题，如上文所述，但需要调用

.tox textarea

；伟大的、非常简单的解决方案，应该是一个公认的答案。