富文本編輯在Android移動采編中的研究與應(yīng)用
富文本編輯在Android移動采編中的研究與應(yīng)用
趙 韜 吳 桑 銀 進(jìn)
(四川封面?zhèn)髅接邢挢?zé)任公司)
【摘 要】本文主要研究在Android系統(tǒng)中,通過原生輸入控件EditText,實現(xiàn)富文本編輯,并修改Htmljava文件兼容css樣式等實現(xiàn)HTML標(biāo)簽語言與原生富文本的相互轉(zhuǎn)換,以實現(xiàn)新聞在移動端的采編。
【關(guān)鍵詞】富文本HTML csS
1 背景
隨著互聯(lián)網(wǎng)的快速發(fā)展,移動端分享信息變得越來越便捷,分享的信息類型從文字發(fā)展到圖片、音頻、視頻。而在新聞媒體行業(yè),現(xiàn)有的簡單記錄新聞內(nèi)容的方式已經(jīng)有了不小的局限性,在調(diào)研了媒體從業(yè)者需求的基礎(chǔ)上,發(fā)現(xiàn)他們對于信息內(nèi)容的表達(dá)方式上不只局限一段文字,一張圖或者一段視頻,需要更復(fù)雜的文本混排方式,這樣能更加豐富全面的記錄新聞內(nèi)容。在此基礎(chǔ)上,我們研究開發(fā)了Android平臺上的富文本編輯器,希望由此能提高新聞從業(yè)者的工作效率。
2 富文本在Android移動采編中的使用
2.1 富文本簡介
富文本是在純文本的基礎(chǔ)上增加文字大小顏色樣式、圖片插入、連接插入等特殊的文本格式。具有圖文混排,加粗樣色變化等特效,更能吸引用戶眼球,也能更突出的將重要的信息傳達(dá)也用戶。
在Android中,字符級別的樣式有:文本大小、文本顏色、文本所在背景顏色、粗體、斜體、描邊、下劃線、刪除線、上標(biāo)、下標(biāo)、外鏈、圖片插入等;段落級別的樣式有:對齊方式、文本縮進(jìn)、文本間距、圖片插入等。在本文中,圖片插入僅支持段落樣式。
在采編系統(tǒng)中,通常需要將文字和圖片加上段落樣式以及粗體斜體等標(biāo)記,最后生成HTML代碼,因為HTML中包含有文字、圖片的css style,所以通過瀏覽器等媒介來展示HTML時,就可以顯示為我們所需要的富文本。
2.2 富文本CharSequence的使用
在Android中,富文本也就是CharSequence,是由一串char構(gòu)成的字符串結(jié)合,可以通過給特定位置的字符串設(shè)置Span,當(dāng)繪制的時候調(diào)用Span的draw方法即可將span的樣式顯示出來,用戶就可以看到加粗、斜體、圖片等特殊樣式了,再通過修改過的Htmljava中的方法將CharSequence轉(zhuǎn)換為HTML,即可實現(xiàn)富文本的編輯與發(fā)布。
3 基于Android的富文本編輯器的研究
3.1 輸入框EditText
EditText作為系統(tǒng)原生控件,能輸入文字,修改字體和顏色,但這些修改都是全局的,即不能單獨給某個字符添加特殊顏色樣式等。要實現(xiàn)富文本,還要依托于EditText中記錄文本的屬性mText,該屬性是一個CharSequence,通過這個屬性即可將普通文本作為富文本展示。使用mText雖然能展示出富文本,但是不能實現(xiàn)編輯功能,此時需要監(jiān)聽EditText的輸入變化,當(dāng)字符輸入的時候,需要給當(dāng)前輸入的字符依次應(yīng)用各種樣式。
3.2輸入框編輯器工具欄
在富文本編輯過程中,需要一個工具欄,以便能快速設(shè)置字號、大小、顏色、對齊方式等。這個工具欄需要與輸入框EditText關(guān)聯(lián),在需要編輯時,才出現(xiàn)工具欄。監(jiān)聽EditText的焦點變化,即可實現(xiàn)需要編輯時出現(xiàn)工具欄,不需要編輯的時候關(guān)閉工具欄。此外,當(dāng)用戶滑動內(nèi)容的時候,將焦點取消,自然也關(guān)閉了工具欄。
應(yīng)用內(nèi)每一個樣式都是一個Plugin插件,里面記錄了當(dāng)前該樣式的狀態(tài),比如加粗與不加粗,文本大小是多少,文本顏色是什么,這些狀態(tài)值與工具欄對應(yīng)的UI綁定,當(dāng)用戶點擊切換狀態(tài)的時候,插件內(nèi)的狀態(tài)變更,同時根據(jù)選中的光標(biāo)決定是否修改內(nèi)容的樣式。
當(dāng)切換了光標(biāo)位置,或者選擇了一段文本,一次檢索每個插件并將當(dāng)前選中的樣式狀態(tài)給每個插件的狀態(tài)賦值,然后同步更新到工具欄對應(yīng)的UI上。
3.3 具體實現(xiàn)
靜態(tài)準(zhǔn)備:為每一個樣式添加一個類用作管理,取名為PluginXXX,XXX為具體樣式的名稱;自定義View繼承EditText,維護(hù)一個插件集合。
動態(tài)變更:用戶輸入字符后,依次遍歷插件集合給新添加的字符添加各種樣式;光標(biāo)改變的時候,依次遍歷插件集合將當(dāng)前選中文本的樣式更新到插件中,并通知工具欄UI做出更改;當(dāng)用戶交互工具欄UI時,找到指定插件修改狀態(tài)并給文本設(shè)置新的樣式。
歷史記錄:當(dāng)輸入內(nèi)容變更的時候,需要記錄歷史數(shù)據(jù),以便用戶快速進(jìn)行回退。
3.4操作流程圖
3.5 框架圖
4 CharSequence與HTML互相轉(zhuǎn)換的研究
富文本CharSequence要轉(zhuǎn)換為HTML,在系統(tǒng)提供的Html.java中的方法不能解析成符合需求的樣式,同時也存在css樣式不兼容的問題。
4.1 對圖片、視頻的處理
轉(zhuǎn)換為HTML:在編輯插入圖片視頻的過程中,使用自定義的Span,保存圖片的地址,視頻的地址和視頻封面的地址,當(dāng)查詢到對應(yīng)的特殊自定義Span,填充對應(yīng)的<img>或者<video>標(biāo)簽。
解析為原生:解析到<img>或者<video>標(biāo)簽,使用自定義的span填充,同時拉取網(wǎng)絡(luò)圖片并展示。
4.2對鏈接的處理
轉(zhuǎn)換為HTML:鏈接也采用自定義Span進(jìn)行編輯顯示,查詢到該span時,使用<a>標(biāo)簽進(jìn)行填充;
解析為原生:和圖片視頻同理,解析到<a>標(biāo)簽,使用自定義的span填充。
4.3 兼容css樣式
解析為原生:由于系統(tǒng)自帶的解析,并不支持css樣式,緩存css樣式,在span標(biāo)簽中,如果存在class屬性,即從緩存的css樣式找到對應(yīng)的屬性進(jìn)行span設(shè)置。
5 結(jié)束語
本文設(shè)計并實現(xiàn)了基于Android平臺的富文本編輯器,有著操作便捷、擴展性強、兼容性強等優(yōu)點,方便媒體從業(yè)者更加便捷的編輯發(fā)布新聞內(nèi)容,提高工作效率。對富文本編輯器在動態(tài)顯示GIF圖片、流暢度等方面的提升和優(yōu)化是下一步的研究方向。
參考文獻(xiàn):
[1]多格式文本編輯器:https://github.com/widemouth-dz/wmrichtexteditor
[2] RichEditor:https://github.com/yuruiyin/RichEditor
新聞技聯(lián)動態(tài)
- BIRTV2023 媒體大模型創(chuàng)新和應(yīng)用技術(shù)交流會 邀請函 2023-07-26
- 【邀請函】中國新聞技聯(lián)2023 年學(xué)術(shù)年會 2023-07-20
- 新融合與智安全高峰論壇隆重召開! 2023-04-20
- 首個全國性媒體AIGC研究機構(gòu)在廣西成立 2023-04-14
- 【邀請函】“數(shù)字中國”下的媒體新機遇 “王選獎”獲獎案例分享會暨媒體融合創(chuàng)新發(fā)展研討會 2023-03-23
- [邀請函]"中國新聞技聯(lián)"市縣融媒體分會2023年學(xué)術(shù)年會 2023-03-15
- 推動知識資源平臺合規(guī)健康發(fā)展 共促數(shù)字版權(quán)規(guī)范化合理化 2023-03-06
- 成功舉辦中國新聞技術(shù)工作者聯(lián)合會市縣融媒體分會年會暨換屆大會 2022-12-23
- 中國新聞技聯(lián)新聞信息標(biāo)準(zhǔn)化分會 2022年年會成功召開 2022-12-01
- 《機器生產(chǎn)內(nèi)容自動化分級》團體標(biāo)準(zhǔn) 正式發(fā)布實施 2022-12-01