我正在使用使用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()
,但它并没有像所有人所说的那样起作用。
有什么想法?提前谢谢。
答案 0 :(得分:1)
我找到了答案,一旦我缩小了实际问题,我就是将TinyMCE加载到jquery.colorbox弹出窗口中。 Colorbox可以防止任何类型的focus
事件/操作发生在其定义的容器之外。 TinyMCE通过iframe弹出它的东西,而不是实际上在colorbox容器中。
修复很简单:在colorbox选项中设置trapFocus: false
并且一切正常。理解这一点,这意味着用户可以将聚焦颜色框的标记为覆盖后面的元素。
答案 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 );
}