富文本編輯在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平臺的富文本編輯器，有著操作便捷、擴(kuò)展性強(qiáng)、兼容性強(qiáng)等優(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