jquery - TinyMCE 模式框中的文本框不可点击

Question

我正在为客户开发一个面板，该面板具有一个打开模式的“新博客帖子”按钮，在该模式中可以单击打开另一个模式的“添加图像”框。这里的问题是“添加图像”模态框包含本应可点击的文本框，但事实并非如此。

我正在试验 Z-Index 以查看是否是问题所在，但是我没有运气解决问题。

这些模态由 Bootstrap 和 TinyMCE(用于编辑)组成。

可以在这里找到:http://olidev.me/testpanel/ : 在“美国站点”选项卡下，单击“添加博客帖子”，然后单击“帖子”区域工具栏上的“插入”选项卡和“插入图片”。

对于这个问题的困惑访问，我们深表歉意，但希望它很容易解决。

编辑:我尝试了另一个名为“CKEDITOR”的应用程序，但出现了完全相同的问题，这是因为 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 模态焦点修复:

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

JSFiddle