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

时间:2017-06-14 03:19:29

标签: javascript html froala

我正在使用froala编辑器。 https://www.froala.com/wysiwyg-editor

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

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

Check highlighted area popup is coming event there is no room

1 个答案:

答案 0 :(得分:0)

我通过修改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;
          }
      }
  }

并在hide方法中删除该类。

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

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