2017-06-14 82 views
0

我正在使用froala編輯器。 https://www.froala.com/wysiwyg-editorFroala編輯器工具欄彈出窗口出現在底部,即使沒有足夠的空間放置它

問題我正面臨着這個問題,當編輯器工具欄靠近窗口底部時,我們打開任何工具欄彈出窗口,例如下圖所示圖像上傳彈出窗口。然後,即使沒有適當的空間,它的一部分也是隱藏的。理想情況下,在這種情況下,它應該顯示在工具欄的頂部。

請建議我該如何解決這個問題。

Check highlighted area popup is coming event there is no room

回答

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

並在隱藏方法中刪除類。

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

這對我有用。希望這對其他人也有幫助。

相關問題