富文本編輯在Android移動(dòng)采編中的研究與應(yīng)用

富文本編輯在Android移動(dòng)采編中的研究與應(yīng)用

趙  韜  吳  桑  銀  進(jìn)

(四川封面?zhèn)髅接邢挢?zé)任公司)

【摘  要】本文主要研究在Android系統(tǒng)中，通過原生輸入控件EditText,實(shí)現(xiàn)富文本編輯，并修改Htmljava文件兼容css樣式等實(shí)現(xiàn)HTML標(biāo)簽語言與原生富文本的相互轉(zhuǎn)換，以實(shí)現(xiàn)新聞在移動(dòng)端的采編。

【關(guān)鍵詞】富文本HTML csS

1  背景

隨著互聯(lián)網(wǎng)的快速發(fā)展，移動(dòng)端分享信息變得越來越便捷，分享的信息類型從文字發(fā)展到圖片、音頻、視頻。而在新聞媒體行業(yè)，現(xiàn)有的簡(jiǎn)單記錄新聞內(nèi)容的方式已經(jīng)有了不小的局限性，在調(diào)研了媒體從業(yè)者需求的基礎(chǔ)上，發(fā)現(xiàn)他們對(duì)于信息內(nèi)容的表達(dá)方式上不只局限一段文字，一張圖或者一段視頻，需要更復(fù)雜的文本混排方式，這樣能更加豐富全面的記錄新聞內(nèi)容。在此基礎(chǔ)上，我們研究開發(fā)了Android平臺(tái)上的富文本編輯器，希望由此能提高新聞從業(yè)者的工作效率。

2  富文本在Android移動(dòng)采編中的使用

2.1  富文本簡(jiǎn)介

富文本是在純文本的基礎(chǔ)上增加文字大小顏色樣式、圖片插入、連接插入等特殊的文本格式。具有圖文混排，加粗樣色變化等特效，更能吸引用戶眼球，也能更突出的將重要的信息傳達(dá)也用戶。

在Android中，字符級(jí)別的樣式有：文本大小、文本顏色、文本所在背景顏色、粗體、斜體、描邊、下劃線、刪除線、上標(biāo)、下標(biāo)、外鏈、圖片插入等；段落級(jí)別的樣式有：對(duì)齊方式、文本縮進(jìn)、文本間距、圖片插入等。在本文中，圖片插入僅支持段落樣式。

在采編系統(tǒng)中，通常需要將文字和圖片加上段落樣式以及粗體斜體等標(biāo)記，最后生成HTML代碼，因?yàn)镠TML中包含有文字、圖片的css style,所以通過瀏覽器等媒介來展示HTML時(shí)，就可以顯示為我們所需要的富文本。

2.2  富文本CharSequence的使用

在Android中，富文本也就是CharSequence,是由一串char構(gòu)成的字符串結(jié)合，可以通過給特定位置的字符串設(shè)置Span,當(dāng)繪制的時(shí)候調(diào)用Span的draw方法即可將span的樣式顯示出來，用戶就可以看到加粗、斜體、圖片等特殊樣式了，再通過修改過的Htmljava中的方法將CharSequence轉(zhuǎn)換為HTML,即可實(shí)現(xiàn)富文本的編輯與發(fā)布。

3  基于Android的富文本編輯器的研究

3.1  輸入框EditText

EditText作為系統(tǒng)原生控件，能輸入文字，修改字體和顏色，但這些修改都是全局的，即不能單獨(dú)給某個(gè)字符添加特殊顏色樣式等。要實(shí)現(xiàn)富文本，還要依托于EditText中記錄文本的屬性mText,該屬性是一個(gè)CharSequence,通過這個(gè)屬性即可將普通文本作為富文本展示。使用mText雖然能展示出富文本，但是不能實(shí)現(xiàn)編輯功能，此時(shí)需要監(jiān)聽EditText的輸入變化，當(dāng)字符輸入的時(shí)候，需要給當(dāng)前輸入的字符依次應(yīng)用各種樣式。

3.2輸入框編輯器工具欄

在富文本編輯過程中，需要一個(gè)工具欄，以便能快速設(shè)置字號(hào)、大小、顏色、對(duì)齊方式等。這個(gè)工具欄需要與輸入框EditText關(guān)聯(lián)，在需要編輯時(shí)，才出現(xiàn)工具欄。監(jiān)聽EditText的焦點(diǎn)變化，即可實(shí)現(xiàn)需要編輯時(shí)出現(xiàn)工具欄，不需要編輯的時(shí)候關(guān)閉工具欄。此外，當(dāng)用戶滑動(dòng)內(nèi)容的時(shí)候，將焦點(diǎn)取消，自然也關(guān)閉了工具欄。

應(yīng)用內(nèi)每一個(gè)樣式都是一個(gè)Plugin插件，里面記錄了當(dāng)前該樣式的狀態(tài)，比如加粗與不加粗，文本大小是多少，文本顏色是什么，這些狀態(tài)值與工具欄對(duì)應(yīng)的UI綁定，當(dāng)用戶點(diǎn)擊切換狀態(tài)的時(shí)候，插件內(nèi)的狀態(tài)變更，同時(shí)根據(jù)選中的光標(biāo)決定是否修改內(nèi)容的樣式。

當(dāng)切換了光標(biāo)位置，或者選擇了一段文本，一次檢索每個(gè)插件并將當(dāng)前選中的樣式狀態(tài)給每個(gè)插件的狀態(tài)賦值，然后同步更新到工具欄對(duì)應(yīng)的UI上。

3.3  具體實(shí)現(xiàn)

靜態(tài)準(zhǔn)備：為每一個(gè)樣式添加一個(gè)類用作管理，取名為PluginXXX,XXX為具體樣式的名稱；自定義View繼承EditText,維護(hù)一個(gè)插件集合。

動(dòng)態(tài)變更：用戶輸入字符后，依次遍歷插件集合給新添加的字符添加各種樣式；光標(biāo)改變的時(shí)候，依次遍歷插件集合將當(dāng)前選中文本的樣式更新到插件中，并通知工具欄UI做出更改；當(dāng)用戶交互工具欄UI時(shí)，找到指定插件修改狀態(tài)并給文本設(shè)置新的樣式。

歷史記錄：當(dāng)輸入內(nèi)容變更的時(shí)候，需要記錄歷史數(shù)據(jù)，以便用戶快速進(jìn)行回退。

3.4操作流程圖

3.5  框架圖

4 CharSequence與HTML互相轉(zhuǎn)換的研究

富文本CharSequence要轉(zhuǎn)換為HTML,在系統(tǒng)提供的Html.java中的方法不能解析成符合需求的樣式，同時(shí)也存在css樣式不兼容的問題。

4.1  對(duì)圖片、視頻的處理

轉(zhuǎn)換為HTML:在編輯插入圖片視頻的過程中，使用自定義的Span,保存圖片的地址，視頻的地址和視頻封面的地址，當(dāng)查詢到對(duì)應(yīng)的特殊自定義Span,填充對(duì)應(yīng)的<img>或者<video>標(biāo)簽。

解析為原生：解析到<img>或者<video>標(biāo)簽，使用自定義的span填充，同時(shí)拉取網(wǎng)絡(luò)圖片并展示。

4.2對(duì)鏈接的處理

轉(zhuǎn)換為HTML:鏈接也采用自定義Span進(jìn)行編輯顯示，查詢到該span時(shí)，使用<a>標(biāo)簽進(jìn)行填充；

解析為原生：和圖片視頻同理，解析到<a>標(biāo)簽，使用自定義的span填充。

4.3  兼容css樣式

解析為原生：由于系統(tǒng)自帶的解析，并不支持css樣式，緩存css樣式，在span標(biāo)簽中，如果存在class屬性，即從緩存的css樣式找到對(duì)應(yīng)的屬性進(jìn)行span設(shè)置。

5  結(jié)束語

本文設(shè)計(jì)并實(shí)現(xiàn)了基于Android平臺(tái)的富文本編輯器，有著操作便捷、擴(kuò)展性強(qiáng)、兼容性強(qiáng)等優(yōu)點(diǎn)，方便媒體從業(yè)者更加便捷的編輯發(fā)布新聞內(nèi)容，提高工作效率。對(duì)富文本編輯器在動(dòng)態(tài)顯示GIF圖片、流暢度等方面的提升和優(yōu)化是下一步的研究方向。

參考文獻(xiàn)：

[1]多格式文本編輯器：https://github.com/widemouth-dz/wmrichtexteditor

[2] RichEditor:https://github.com/yuruiyin/RichEditor