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

Question

我正在为客户开发一个面板,其中包含一个"新博客帖子"按钮,可以打开一个模态,在该模式中可以单击"添加图像"框,打开另一个模态.这里的问题是"添加图像"模式框包含应该可点击的文本框,但这些文本框不是.

我正在试验Z-Index,看看是不是问题,我没有解决问题的运气.

这些模态包括Bootstrap和TinyMCE(用于编辑).

可在此处找到:http://olidev.me/testpanel/:在"美国网站"标签下,点击"添加博客帖子",然后点击"发布"区域中工具栏上的"插入"标签, '插入图片'.

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

编辑:我尝试了另一个名为'CKEDITOR'的应用程序,并且出现了完全相同的问题,这是由于3个模态相互重叠？

Answer 1

由于您使用的是Bootstrap(也适用于jQuery UI对话框),因此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 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 的引导模式，并且您想要插入一个链接或其他选项，在其中打开一个带有文本输入字段的 tinyMCE 对话框，您将无法将焦点放在输入文本字段上（就像它处于禁用状态一样）

解决方案：

从引导模式 html 中删除 tabindex="-1"。这可以在模态 html 容器上或 TinyMCE 的事先初始化中完成。