Froala编辑器工具栏弹出窗口出现在底部，即使没有足够的空间放置它

问题描述：

我正在使用froala编辑器。 https://www.froala.com/wysiwyg-editor Froala编辑器工具栏弹出窗口出现在底部，即使没有足够的空间放置它

问题我正面临着这个问题，当编辑器工具栏靠近窗口底部时，我们打开任何工具栏弹出窗口，例如下图所示图像上传弹出窗口。然后，即使没有适当的空间，它的一部分也是隐藏的。理想情况下，在这种情况下，它应该显示在工具栏的顶部。

请建议我该如何解决这个问题。

答

我通过修改froala_editor.js文件得到了我的问题的解决。我所做的是修改了弹出窗口的Show方法定义。

找出下面的评论并更新下面的if/else代码的if条件。

if (editor.opts.toolbarBottom && $container && editor.$tb && $container.get(0) == editor.$tb.get(0)) { 
    popups[id].addClass('fr-above'); 
    if (top) top = top - popups[id].outerHeight(); 
    } 
    else if (top) { 
     if ((top + popups[id].outerHeight() + 31) > ($(window).height() + window.pageYOffset)) { 
      popups[id].addClass('fr-above'); 
      popups[id].addClass('manual-above'); 
      top = top - popups[id].outerHeight(); 
      if (obj_height) { 
       top = top - obj_height; 
      } 
     } 
    }

并在隐藏方法中删除类。

popups[id].removeClass('manual-above');

并在_topNormalized方法更新下面的代码。

if (p_offset + top + height > $(editor.o_doc).outerHeight() && $el.parent().offset().top + new_top > 0) { 
     top = new_top; 
     $el.addClass('fr-above'); 
    } 
    else { 
     if (!$el.hasClass('manual-above')) { 
      $el.removeClass('fr-above'); 
     } 
    }

这对我有用。希望这对其他人也有帮助。

Froala编辑器工具栏弹出窗口出现在底部，即使没有足够的空间放置它

相关推荐