TinyMCE模式框中的文本框不可点击答案

【问题标题】：Textbox not clickable in TinyMCE modal boxTinyMCE模式框中的文本框不可点击
【发布时间】：2014-11-10 03:06:26
【问题描述】：

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

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

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

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

对于这个问题的令人困惑的访问感到抱歉，但希望它很容易解决。

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

【问题讨论】：

能把相关代码sn-ps贴在这里吗？
我想我知道答案，但我无法通过 250 行代码来确保它有效。
jsfiddle.net/y9wgdfdw/3 你来了。显然我无法将此链接添加到我的描述中，因为它没有附带代码。我不确定问题出在哪里，所以我无法在主帖上显示特定代码
谢谢 Oliver，我去看看。
我注意到的一件事（这不是解决方案）是输入没有任何“类型”属性。

标签： jquery html css twitter-bootstrap tinymce

【解决方案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

【讨论】：

太棒了。谢谢你。我会奖励赏金:)
谢谢，很高兴您现在可以解决这个奇怪的问题。 :)
感谢漂亮的解决方案。
在新版本的 tinyMCE (> 5.0) 中，需要寻找$(e.target).closest(".tox").length
如果有人对codesample plugin 有这个问题，像上面一样，但调用.tox-textarea;

【解决方案2】：

问题：

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

解决方案：

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

【讨论】：

伟大且非常简单的解决方案，这应该是一个可以接受的答案。

【解决方案3】：

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

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

然后您将能够选择和接受文件。
这是TinyMCE FAQ页面的官方回答：

【讨论】：

嗯，但它不仅有这个错误的源框，它还有图像描述框和尺寸。很抱歉让我感到痛苦，但我也有一种感觉：/我真的很感谢你的时间。考虑到它是一种可行的替代方案，我会给你一个 +1，而且你已经在这个问题上投入了大量时间
我很确定“源”框可以是粘贴的 url，而不是使用管理器
可能还有更多，很难说。但是看看这个：pixabay.com/en/blog/posts/direct-image-uploads-in-tinymce-4-42。我想一旦你可以让源字段工作你肯定会知道。
太棒了。我会调查的。谢谢！

【解决方案4】：

Eternalhour 解决方案成功了。但是，我不得不在引导程序上挖掘并更改我的设置。由于我的页面使用的是 Bootstrap (v3.3.7)，我必须执行以下操作。

在 bootstrap.js 文件中查找 focusin 事件。
找到这篇文章中引用的函数，其中调用了 Bootstrap modal。
测试将这段代码添加到函数的修复。
测试成功后，您应该修改您的缩小文件，以防您将其添加到您的项目中，但要小心（我是手动完成的）。

结果：

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 中对其进行了测试，并且效果很好。

【讨论】：