之前本站發(fā)布了一個(gè)關(guān)于UEditor編輯器在移動(dòng)端圖片被拉伸問題解決方法,但是經(jīng)過反復(fù)的測(cè)試后,發(fā)現(xiàn)問題依然存在,不僅僅是存在于移動(dòng)端,在PC端也是存在同樣的圖片變形問題,經(jīng)過源碼碼網(wǎng)小編反復(fù)測(cè)試,貼出最佳解決方案。
1、首先找到ueditor/themes目錄下的iframe.css,在其中添加以下css樣式代碼:
img{ max-width: 100%; /* 圖片自適應(yīng)寬度 */ } body{ overflow-y: scroll !important; } .view{ word-break: break-all; } .vote_area{ display: block; } .vote_iframe{ background-color: transparent; border: 0 none; height: 100%; } #edui1_imagescale{ display: none !important; /* 去掉點(diǎn)擊圖片后出現(xiàn)的拉伸邊框 */ }
這段代碼的作用就是限制在編輯器編輯的時(shí)候,由于圖片的尺寸過大,超出編輯窗口,而形成的滾動(dòng)條。
2、然后再找到ueditor目錄下的ueditor.config.js文件,找到搜索找到以下代碼,去掉前邊的注釋
iframeCssUrl: URL + '/themes/iframe.css'
按照以上操作步驟,基本上可以解決圖片顯示變形的問題,其原理就是讓圖片在上傳的過程中,給圖片設(shè)定好css屬性。這里需要注意的是,在第二步中,URL之后,themes之前的斜杠問題,小編的URL在結(jié)尾自帶了斜杠,而這里還有一個(gè)斜杠,造成了雙斜杠即“//”這導(dǎo)致在谷歌瀏覽器中不能完全被識(shí)別,所以引入css失敗,導(dǎo)致問題不能得到解決,但是在其他的瀏覽器,比如后火狐瀏覽器、微軟的Edge瀏覽器中是可以正常識(shí)別,所以這里一定要注意,如果你的URL地址結(jié)尾已經(jīng)帶了斜杠,在第二步的時(shí)候,注意去掉themes前面的斜杠,否則可能會(huì)造成在谷歌瀏覽中問題得不到解決。