TinyMCE 4 插入链接表单字段已禁用答案

【问题标题】：TinyMCE 4 insert link form fields disabledTinyMCE 4 插入链接表单字段已禁用
【发布时间】：2015-11-09 21:12:00
【问题描述】：

我正在使用使用 TinyMCE 4 的 tinymce-rails gem，我正在加载 link 插件，所有这些都是在颜色框弹出窗口之后/中启动的。

TinyMCE 编辑器工作正常，但链接按钮会弹出一个对话框来添加/编辑链接，但除了 target 之外的所有字段都不可编辑。

下面是相关代码：

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 问题/答案中找到了 $(document).on 'focusin'，但这对我不起作用。它确实会触发e.stopImmediatePropagation()，但它并没有像每个人所说的那样工作。

有什么想法吗？提前致谢。

【问题讨论】：

标签： javascript jquery ruby-on-rails ruby-on-rails-4 tinymce-4

【解决方案1】：

缩小实际问题的范围后，我找到了答案，即我正在将 TinyMCE 加载到 jquery.colorbox 弹出窗口中。 Colorbox 防止任何类型的focus 事件/动作在其定义的容器之外发生。 TinyMCE 通过 iframe 弹出其内容，而不是在颜色框容器中。

修复很简单：在颜色框选项中设置trapFocus: false，一切正常。请理解，这意味着用户可以标记焦点颜色框到覆盖层后面的元素。

通过John Naegle on stackoverflow

【讨论】：

【解决方案2】：

根据 TinyMCE 的版本，解决方案是：

$(document).on('focusin', function(e) {
    var target = $(e.target);
    if (target.closest(".mce-window").length || target.closest(".tox-dialog").length) {
        e.stopImmediatePropagation();
        target = null;
    }
});

当然还有来自Sparkmasterflex

的回答

【讨论】：

【解决方案3】：

TinyMCE5 和 MagnificPopup 的兼容性：

$.magnificPopup.instance._onFocusIn = function( e ) {
    try {
        if( $( e.target ).attr( 'class' ).indexOf( 'tox-' ) >= 0 ) {
            return true;
        }
    } catch( e ) {}

    $.magnificPopup.proto._onFocusIn.call( this, e );
}

【讨论】：