Froala 编辑器工具栏弹出窗口出现在底部，即使 space 不足以放置它

Question

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

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

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

Answer 1

我通过修改 froala_editor.js 文件得到了问题的解决方案。我做的是修改popup的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;
          }
      }
  }

并在隐藏方法中删除 class。

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 编辑器工具栏弹出窗口出现在底部，即使 space 不足以放置它

Froala editor toolbar popups appear at the bottom even if there is not enough space to place it

html

javascript

froala