UEditor組件是百度提供的一套開源的web在線所見即所得富文本編輯器,具有輕量,可定制,注重用戶體驗(yàn)等特點(diǎn),基于MIT協(xié)議,功能很強(qiáng)大。最近在使用的過程中發(fā)現(xiàn)其中上傳的圖片(或者插入已有的表情包圖片)都無法正常縮放,選中圖片,用鼠標(biāo)點(diǎn)擊并拖動(dòng)圖片邊沿的小標(biāo)簽,圖片只能縮小不能放大。嘗試過很多方法都沒辦法解決,甚至檢查了js源碼,也沒有發(fā)現(xiàn)有任何異常的地方。
后來無意中發(fā)現(xiàn)頁面上引入了Bootstrap,而Bootstrap默認(rèn)將box-sizing樣式統(tǒng)一設(shè)成border-box了。具體內(nèi)容可以查看Bootstrap的發(fā)布日志:http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/
有關(guān)box-sizing樣式的定義和用法可以看這里:http://m.survivalescaperooms.com.cn/CSSref/PR_box-sizing.asp
Bootstrap中有影響的css:

*,*:before,*:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
我們只需要在頁面上重新定義css來覆蓋Bootstrap中的上述樣式即可,如:

.edui-container *{ -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .edui-container *:before, .edui-container *:after { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; }
* .edui-container為引用UEditor組件的父元素上使用的css class。
新聞熱點(diǎn)
疑難解答
圖片精選