TinyMCE 4插入链接表单字段已禁用 [英] TinyMCE 4 insert link form fields disabled

问题描述

我正在使用使用TinyMCE 4的 tinymce-rails 宝石，并且正在加载link插件，并在颜色框弹出窗口之后/之内启动所有这些操作.

I'm using the tinymce-rails gem which uses TinyMCE 4 and I'm loading the link plugin and all this is initiated after/in a colorbox popup.

TinyMCE编辑器运行正常，但是链接按钮弹出一个对话框来添加/编辑链接，但是除 target 之外的所有字段均不可编辑.

TinyMCE editor is working perfectly but the link button brings up a dialog to add/edit a link, but none of the fields except the target are available for editing.

下面是相关代码:

setup_new_message: ->
  tinyMCE.init
    selector: '.tinymce'
    plugins: "textcolor link"
    menubar: false
    toolbar: "formatselect | fontselect | bold italic underline | forecolor | alignleft aligncenter alignright | bullist numlist | link"
    height: 250

  $(document).on 'focusin', (e) ->
    if $(e.target).closest(".mce-window").length
      e.stopImmediatePropagation()

我在其他stackoverflow问题/答案中的"focusin"上找到了$(document).，但这对我不起作用.它确实触发了e.stopImmediatePropagation()，但是却没有像大家所说的那样起作用.

I found the $(document).on 'focusin' in other stackoverflow question/answers but this is not working for me. It does fire the e.stopImmediatePropagation() but it is not working as everyone said it would.

有什么想法吗?预先感谢.

Any thoughts? Thanks in advance.

推荐答案

在缩小实际问题后，我找到了答案，那就是我正在将TinyMCE加载到jquery.colorbox弹出窗口中. Colorbox可防止任何类型的focus事件/操作在其定义的容器之外发生.当TinyMCE通过iframe弹出内容时，实际上不在colorbox容器中.

I found the answer once I narrowed down the actual issue was that I was loading the TinyMCE into a jquery.colorbox popup. Colorbox prevents any type of focus event/action to happen outside of its defined container. Where as TinyMCE pops its stuff up through iframes, not actually in the colorbox container.

修复很简单:在颜色框选项中设置trapFocus: false，所有功能都可以正常工作.了解这一点，这意味着用户可以跳出焦点色框到叠加层后面的元素.

the fix was simple: in colorbox options set trapFocus: false and all works as it should. Understand tho, this means the user can tab out of the focused colorbox to elements behind the overlay.

通过 John Naegle进行stackoverflow

这篇关于TinyMCE 4插入链接表单字段已禁用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！