文本框在TinyMCE模式框中无法单击

Question

我正在为一个客户开发一个面板，其中包含一个新的博客文章＆＃39;按钮打开一个模态，在该模态中可以单击“添加图像”按钮。打开另一个模态的框。这里的问题是“添加图片”这一事实。模态框包含应该可点击的文本框，但这些文本框不是。

我正在尝试使用Z-Index来查看是否存在问题，但我没有解决问题的运气。

这些模态由Bootstrap和TinyMCE组成（用于编辑）。

可在此处找到：http://olidev.me/testpanel/：在美国网站＆＃39;选项卡，点击“添加博客帖子”＃39;然后点击“插入”＃39; “发布”中工具栏上的标签区域和＆＃39;插入图像＆＃39;。

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

编辑：我尝试了另一个名为“CKEDITOR＆＃39;并且出现了完全相同的问题，这是由于3个模态相互重叠？

Answer 1

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

TinyMCE in a jQuery UI dialog

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 Modal焦点修复：

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

JSFiddle

Answer 2

在查看您关于插入图片的内容后，我发现它与视频的行为相同。这让我相信原因是因为您需要使用文件管理器插件来处理TinyMCE中的文件，例如MoxieManager。

完成后，您的图像/视频窗口将如下所示：

然后您就可以选择并接受文件了 以下是TinyMCE FAQ页面的正式答案：

Answer 3

Eternalhour 解决方案可以解决问题。但是，我必须在引导程序上挖掘和更改设置。由于我的页面正在使用Bootstrap（v3.3.7），因此我必须执行以下操作。

1. 在bootstrap.js文件中查找focusin事件。

2. 找到本文中引用的功能，在该功能中调用 Bootstrap模式。

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

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

结果：

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中对其进行了测试，并且可以正常工作。

Answer 4

问题：

如果您有一个带有TinyMCE的引导程序模态，并且想要插入链接或其他选项以打开带有文本输入字段的tinyMCE对话框，您将无法专注于输入文本字段（例如处于禁用状态） ）

解决方案：

从引导程序模式html中删除tabindex =“-1”。这可以在模式html容器中或TinyMCE的先前初始化中完成。