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

时间:2015-11-09 21:12:01

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

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

有什么想法?提前谢谢。

3 个答案:

答案 0 :(得分:1)

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

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

通过John Naegle on stackoverflow

答案 1 :(得分:0)

根据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

的答案

答案 2 :(得分:0)

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