禁用 TinyMCE 4 插入 link 表单字段

Question

我正在使用 tinymce-rails gem，它使用 TinyMCE 4，我正在加载 link 插件，所有这一切都是在 after/in 彩框弹出窗口中启动的。

TinyMCE 编辑器工作正常，但 link 按钮会弹出一个对话框 add/edit 和 link，但是 none 字段除了 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()

我在其他 Whosebug question/answers 中找到了 $(document).on 'focusin' 但这对我不起作用。它确实触发了 e.stopImmediatePropagation() 但它并没有像每个人所说的那样工作。

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

Answer 1

一旦我缩小了实际问题的范围，我就找到了答案，因为我正在将 TinyMCE 加载到 jquery.colorbox 弹出窗口中。 Colorbox 防止任何类型的 focus event/action 在其定义的容器之外发生。当 TinyMCE 通过 iframe 弹出它的东西时，实际上并不在 colorbox 容器中。

修复很简单：在 colorbox 选项中设置 trapFocus: false，一切正常。请理解，这意味着用户可以 tab out 聚焦的颜色框到叠加层后面的元素。

通过John Naegle on Whosebug

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

当然还有来自

的回答

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

Answer 4

对于任何将 tinymce 放入 Material UI mui 对话框的人，请执行：

<Dialog disableEnforceFocus={true} ...>

禁用 TinyMCE 4 插入 link 表单字段

TinyMCE 4 insert link form fields disabled

javascript

jquery

ruby-on-rails

ruby-on-rails-4

tinymce-4