ruby-on-rails TinyMCE 4插入链接表单字段已禁用

bq8i3lrv 于 2023-02-06 发布在 Ruby

关注(0)|答案(5)|浏览(171)

我正在使用tinymce-rails gem，它使用TinyMCE 4，我正在加载link插件，所有这些都是在colorbox弹出窗口之后/中启动的。
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()，但它并不像每个人说的那样起作用。
有什么想法吗？先谢了。

ruby-on-rails

来源：https://stackoverflow.com/questions/33618361/tinymce-4-insert-link-form-fields-disabled

5条答案

按热度按时间

pxiryf3j1#

根据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**的答案

赞(0）回复(0）举报 2023-02-06

t2a7ltrp2#

我找到了答案，当我缩小了实际问题是，我加载TinyMCE到一个jquery.colorbox弹出窗口。Colorbox防止任何类型的focus事件/动作发生在其定义的容器之外。其中TinyMCE弹出它的东西通过iframe，而不是实际上在colorbox容器。
解决办法很简单：在颜色框选项中设置trapFocus: false，所有的工作都正常。要理解，这意味着用户可以将焦点颜色框切换到覆盖层后面的元素。
通过John Naegle on stackoverflow

赞(0）回复(0）举报 2023-02-06

of1yzvn43#

对于任何将tinymce放入材质UI mui对话框的人，请执行以下操作：

<Dialog disableEnforceFocus={true} ...>

赞(0）回复(0）举报 2023-02-06

jgzswidk4#

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

赞(0）回复(0）举报 2023-02-06

ffx8fchx5#

我在Vuejs中遇到了同样的问题TineyMce，我在一个对话框中加载TinyMce，当我试图添加一个链接时，另一个对话框打开了，而第二个对话框没有焦点。我没有在对话框中加载编辑器，而是在一个组件中加载编辑器，然后链接对话框输入获得了焦点。

赞(0）回复(0）举报 2023-02-06