1. 程式人生 > >ueditor 與 bootstrap 共用導致圖片縮放大小出問題

ueditor 與 bootstrap 共用導致圖片縮放大小出問題

UEditor元件是百度提供的一套開源的web線上所見即所得富文字編輯器,具有輕量,可定製,注重使用者體驗等特點,基於MIT協議,功能很強大。最近在使用的過程中發現其中上傳的圖片(或者插入已有的表情包圖片)都無法正常縮放,選中圖片,用滑鼠點選並拖動圖片邊沿的小標籤,圖片只能縮小不能放大,還有時只能放大不能縮小。嘗試過很多方法都沒辦法解決,甚至檢查了js原始碼,也沒有發現有任何異常的地方。

  功夫不負有心人,後來檢查發現頁面上引入了Bootstrap,而Bootstrap預設將box-sizing樣式統一設成border-box了。正是這個坑導致ueditor的圖片無法進行縮放,唉。。。下面是解決方案:

在ueditor.min.css中加入如下程式碼,這個坑算是填滿了!!

  1. .edui-container *{-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;}

  2. .edui-container *:before,.edui-container *:after {-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;}