當前位置:編程學習大全網 - 源碼下載 - 如何實現壹個 Android 端的富文本編輯器組件

如何實現壹個 Android 端的富文本編輯器組件

在 Android 上實現富文本編輯器的思路大致分為三種:

使用多種 Layout 布局,每壹種布局對應壹種 HTML 格式,比如圖片,比如順序列表等。具體的實現例子可以參考這個鏈接。 Medium 和

Evernote 的富文本編輯就是采用這種方式實現的。總體來說比較復雜。

WebView + JavaScript 實現。現在 Web 端有很多成熟的 JavaScript 富文本編輯庫,比如 Squire ,妳只需要做好

WebView 和 JavaScript 的交互就可以了(多寫回調函數)。理論上雖然是這麽說,但是在實現過程妳需要解決 WebView 的兼容性問題(

Android 4.4 及其以上版本和 4.4 以下版本的 WebView 內核不壹樣),以及其他壹些不可預見的問題(比如就遇到無法粘貼文字的問題)。

EditText + Span 。 Android 的 TextView 原生支持諸如粗體、刪除線、引用等 Span

,要實現簡單的富文本編輯需求,可操作性還是比較大的。綜合再三,選擇了這種方式來實現自己的需求。

既然決定使用 EditText + Span 的方式來實現,必然要對相關的 API 有所了解。

首先來了解壹下 Span 。Span 是壹個強大的概念,有興趣深入的同學推薦直接閱讀這篇譯文。

在這裏主要使用兩種類型的 Span :

繼承自 CharacterStyle 的 Span ,比如 StyleSpan ,可以在字符級別上添加粗體,下劃線等。

繼承自 ParagraphStyle 的 Span ,比如 QuoteSpan ,可以為段落級別的文本添加引用。

接著需要壹個可以將 Span 的效果設置進去的文本結構(即實現了 Spannable 接口), SpannableStringBuilder

是個不錯的選擇,同時 EditText 提供的 getEditableText() 方法也可以獲得。通常只需要 getEditableText()

就可以了,但是在面對壹些細節部分,可以使用 SpannableStringBuilder 預先設置相應的 Span ,再替換到原來的文本中。

設置 Span 的方式也很簡單,需要調用 Spannable.setSpan(Object what, int start, int end, int

flags) 這個方法即可,方法中 4 個參數的解釋如下:

Object what ,傳入妳使用的 Span 對象。

int start ,設置 Span 的開始位置。

int end ,設置 Span 的結束位置。

int flags ,代表設置 Span 的作用域。

在這裏重點介紹壹下 int flags 這個參數,它接受 4 種類型的參數,分別是:

Spanned.SPAN_INCLUSIVE_EXCLUSIVE ,表示妳在設置 Span 的區域之前輸入文字,輸入的文字也會受到 Span

的影響。

Spanned.SPAN_INCLUSIVE_INCLUSIVE ,表示妳在設置 Span 的區域前後輸入文字,輸入的文字都後受到 Span

的影響。

Spanned.SPAN_EXCLUSIVE_EXCLUSIVE ,表示妳在設置 Span 的區域中出輸入文字,輸入的文字才會受到 Span

的影響。

Spanned.SPAN_EXCLUSIVE_INCLUSIVE ,表示妳在設置 Span 的區域之後輸入文字,輸入的文字也會受到 Span

的影響。

「受到影響」的意思就是,仍然會保持妳設置的 Span 的樣式,比如選擇Spanned.SPAN_EXCLUSIVE_INCLUSIVE

設置了壹段文字的粗體,那麽在這段文字後新輸入的文字,也會是粗體。在這裏推薦使用Spanned.SPAN_EXCLUSIVE_EXCLUSIVE

參數,畢竟其他幾種參數相對不是很好控制,而且會給使用的人帶來的疑惑。認為壹個操作代表的行為應當是準確沒有歧義的。

好,到這裏已經知道大致怎麽作出壹個富文本編輯器組件的樣子了,無非是指定開始位置和結束位置,再設置相應的 Span

即可。至於設置的時候采取什麽樣的規則,妳可以自己定制。但僅僅解決了編輯的問題,仍然存在導入的問題和導出的問題。

導入的問題十分簡單, Android SDK 中提供了 Html.fromHtml() 這個方法,可以很輕松地將 HTML 字符串轉換為所需的

Spanned 對象。但是需要註意的是, Html.fromHtml() 並不支持所有的 HTML 標簽,比如無序列表就不支持,因此妳需要自己實現

Html.TagHandler 接口來處理自己所需的標簽,可以參考這個鏈接,實現了刪除線和簡單無序列表的支持。

面對粗體、斜體這樣字符級別的樣式, Html.fromHtml()

會自然而然的解析,該添加換行的地方就添加換行,並沒有什麽問題;但是面對引用、無序列表這樣段落級別的樣式,該方法會追加壹個換行,也就是兩個換行操作,相當於多出壹個空行。通常來說認為壹個

對應兩個

,但是如果妳有特別需求的話,也可以通過前面說的那樣,自己來解析,而不是用系統默認的方式。

之前介紹了如何導入,想必妳也十分清楚,必然有壹個對應的Html.toHtml() 方法!沒錯,但是遺憾的是,這個方法也不全支持所有 Span

,比如列表就不支持。不過沒有關系, Html.toHtml() 這個方法本身的源碼簡潔易懂,可以參考著實現。

在這裏重點說明 Spannanle 的壹個接口方法 nextSpanTransition(int start, int limit, Class

type) ,這個方法會在妳指定的文本範圍內,返回下壹個妳指定的 Span 類型的開始位置,依照這個方法,就可以逐層掃描指定的 Span

,而不用同時考慮其他類型的 Span 的影響,十分有用。

最後盡管說了這麽多,導入導出還是有壹個比較關鍵的問題,即導入的內容和導出的內容要保持壹致,在這點上目前我還比較難以實現,只能說盡量控制吧,必要的時候還需要使用壹下正則來處理導入導出的文本。

  • 上一篇:電商平臺網頁怎麽做的電商平臺網頁怎麽做的好
  • 下一篇:工程建設之王!
  • copyright 2024編程學習大全網