Question

我正在使用使用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()，但它并没有像所有人所说的那样起作用。

有什么想法？提前谢谢。

Answer 1

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

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

通过John Naegle on stackoverflow

Answer 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

的答案

Answer 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 );
}

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

3 个答案: