資訊專欄INFORMATION COLUMN
摘要：現在在做的項目是一個對功能要求比較高的項目同時也有端的開發項目中有一個場景就是在端通過富文本編輯的內容要在端顯示測試的時候發現有一些圖片超出了手機的最大寬度會出現一個橫向的滾動條這樣很影響體驗做顯示這塊的是公司做和的同事他們拿到的值富文本直
現在在做的項目是一個對功能要求比較高的項目,同時也有SDK端的開發.項目中有一個場景就是在pc端通過富文本編輯的內容要在SDK端顯示,測試的時候發現有一些圖片超出了手機的最大寬度,會出現一個橫向的滾動條,這樣很影響體驗.做顯示這塊的是公司做android和ios的同事,他們拿到的值富文本直接導出的json格式的html代碼,因此他們很難再對代碼進行二次處理,解決問題的源頭又回到了我這里~~
言歸正傳,想要解決問題就要從標簽的style屬性著手;本人在追蹤數據流的時候發現了在導出編輯器內容的時候會把編輯器內容全部遍歷一次的地方,遍歷的數組大概就長這樣(這其實是遍歷之后的,理解我的意思就行)
那么重點來了,以img標簽為例,進一步處理的數據長這個樣
在遍歷的時候會將attrs進行遍歷,遍歷時候大概就給拆成這樣
這個時候就需要在style中插入就行了,這個地方在ueditor.all.js文件的8726行,或者搜索isElement,在
var attrs = node.attrs;下面加上一段代碼
if(node.tagName==="img"){
attrs.style?attrs.style.includes("max-width:100%;")?"":attrs.style+="max-width:100%;":attrs.style="max-width:100%;"
}
粘完應該是這樣的:
說明:首先判斷是否是img標簽,然后判斷是否有style屬性,最后判斷若是有style屬性,style是否有max-width:100%;字段,若有,則跳過,避免每次導出的時候重復賦值.
最后提醒一句,引入的時候要引入ueditor.all.js,別引ueditor.all.min.js了,這改的不是min.js~~~
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/97983.html
摘要：前言本文將介紹筆者在的項目中使用百度的富文本編輯器的過程。以百度官網的為例，控制臺輸入為該編輯器注冊點擊事件，當點擊加粗按鈕時，控制臺輸出為了避免點擊工具條時觸發事件，筆者將自定義的事件全部注釋了。 前言 本文將介紹筆者在React的項目中使用百度的富文本編輯器Ueditor的過程。注意本文不提供一條龍式的使用方法，只是將使用過程中的一些實現思路進行總結，供以參考。react項目中導入...
摘要：前言本文將介紹筆者在的項目中使用百度的富文本編輯器的過程。以百度官網的為例，控制臺輸入為該編輯器注冊點擊事件，當點擊加粗按鈕時，控制臺輸出為了避免點擊工具條時觸發事件，筆者將自定義的事件全部注釋了。 前言 本文將介紹筆者在React的項目中使用百度的富文本編輯器Ueditor的過程。注意本文不提供一條龍式的使用方法，只是將使用過程中的一些實現思路進行總結，供以參考。react項目中導入...
摘要：移動端文檔富文本編輯器，支持圖文混排引用大標題無序列表，字體顏色加粗斜體。可用于獨立項目開發，也可以用于與原生混合開發。，圖片文件最大尺寸限制，單位，默認，編輯器左右內邊距，默認像素，是否顯示底部工具欄圖片標簽連接添加等圖標。 ZxEditor 移動端HTML文檔（富文本）編輯器，支持圖文混排、引用、大標題、無序列表，字體顏色、加粗、斜體。 可用于獨立web項目開發，也可以用于與原生A...
閱讀 1017·2021-10-27 14:15
閱讀 2773·2021-10-25 09:45
閱讀 1938·2021-09-02 09:45
閱讀 3363·2019-08-30 15:55
閱讀 1806·2019-08-29 16:05
閱讀 3199·2019-08-28 18:13
閱讀 3112·2019-08-26 13:58
閱讀 448·2019-08-26 12:01
