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

帕万·阿格拉瓦尔

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

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

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

检查突出显示的区域弹出即将发生事件没有空间

帕万·阿格拉瓦尔

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

连续的空间有时会出现在Geany中(我的标准文本编辑器)

来自分类Dev

为什么即使禁用了AdBlock,弹出窗口也不会出现在Firefox上?

来自分类Dev

仅当具有1个工具栏的多个编辑器聚焦于编辑器时,才显示TextAngular工具栏

来自分类Dev

具有自定义工具栏的多个Ckeditor内联编辑器

来自分类Dev

弹出窗口没有出现在按钮下方

来自分类Dev

无法在ubuntu服务器中安装新内核。即使有足够的磁盘空间,也会出现“ gzip:stdout:设备上没有剩余空间”错误

来自分类Dev

打开Outlook时出现“没有足够的内存或磁盘空间来完成操作”错误

来自分类Dev

没有足够的空间来运行BuildTools-Java-Minecraft插件测试服务器

来自分类Dev

安装了compiz,现在我的所有工具栏都是白色的,没有窗口装饰

来自分类Dev

作为用户,如何在没有工具栏的弹出窗口中打开网站?

来自分类Dev

为什么D3图表没有出现在我的LeafletJS弹出窗口中?

来自分类Dev

为什么单选按钮没有出现在Windows 8的弹出窗口中?

来自分类Dev

为什么滚动条没有出现在弹出窗口内?

来自分类Dev

“没有足够的存储空间来完成此操作”- 加载 JSON 文件时出现 JQuery 错误

来自分类Dev

工具栏没有出现

来自分类Dev

隐藏的后退按钮有时会出现在导航栏中

来自分类Dev

带有占位符的可编辑div中的光标不会出现在Google Chrome浏览器的合适位置

来自分类Dev

如何创建没有从桌面启动的没有按钮或工具栏的浏览器窗口?

来自分类Dev

出现在 iPhone 上但不在 Android 上的 Div 底部工具栏

来自分类Dev

为什么即使有足够的空间,在7zip上也会出现“磁盘上空间不足”错误?

来自分类Dev

为什么我的弹出窗口没有出现在所有其他html元素上方?

来自分类Dev

没有弹出出现在AutoCompleteTextView中

来自分类Dev

Froala的所有工具栏按钮

来自分类Dev

带有占位符的可编辑div中的光标不会出现在Google Chrome中的合适位置

来自分类Dev

将textAngular工具栏放置在textEditor的底部

来自分类Dev

我的探查器工具栏未出现在symfony 4.3.1中

来自分类Dev

出现在Android工具栏上的项目

来自分类Dev

选择出现在工具栏中的按钮

来自分类Dev

工具栏未出现在 UWP 中

Related 相关文章

  1. 1

    连续的空间有时会出现在Geany中(我的标准文本编辑器)

  2. 2

    为什么即使禁用了AdBlock,弹出窗口也不会出现在Firefox上?

  3. 3

    仅当具有1个工具栏的多个编辑器聚焦于编辑器时,才显示TextAngular工具栏

  4. 4

    具有自定义工具栏的多个Ckeditor内联编辑器

  5. 5

    弹出窗口没有出现在按钮下方

  6. 6

    无法在ubuntu服务器中安装新内核。即使有足够的磁盘空间,也会出现“ gzip:stdout:设备上没有剩余空间”错误

  7. 7

    打开Outlook时出现“没有足够的内存或磁盘空间来完成操作”错误

  8. 8

    没有足够的空间来运行BuildTools-Java-Minecraft插件测试服务器

  9. 9

    安装了compiz,现在我的所有工具栏都是白色的,没有窗口装饰

  10. 10

    作为用户,如何在没有工具栏的弹出窗口中打开网站?

  11. 11

    为什么D3图表没有出现在我的LeafletJS弹出窗口中?

  12. 12

    为什么单选按钮没有出现在Windows 8的弹出窗口中?

  13. 13

    为什么滚动条没有出现在弹出窗口内?

  14. 14

    “没有足够的存储空间来完成此操作”- 加载 JSON 文件时出现 JQuery 错误

  15. 15

    工具栏没有出现

  16. 16

    隐藏的后退按钮有时会出现在导航栏中

  17. 17

    带有占位符的可编辑div中的光标不会出现在Google Chrome浏览器的合适位置

  18. 18

    如何创建没有从桌面启动的没有按钮或工具栏的浏览器窗口?

  19. 19

    出现在 iPhone 上但不在 Android 上的 Div 底部工具栏

  20. 20

    为什么即使有足够的空间,在7zip上也会出现“磁盘上空间不足”错误?

  21. 21

    为什么我的弹出窗口没有出现在所有其他html元素上方?

  22. 22

    没有弹出出现在AutoCompleteTextView中

  23. 23

    Froala的所有工具栏按钮

  24. 24

    带有占位符的可编辑div中的光标不会出现在Google Chrome中的合适位置

  25. 25

    将textAngular工具栏放置在textEditor的底部

  26. 26

    我的探查器工具栏未出现在symfony 4.3.1中

  27. 27

    出现在Android工具栏上的项目

  28. 28

    选择出现在工具栏中的按钮

  29. 29

    工具栏未出现在 UWP 中

热门标签

归档