Android 一種簡單的富文本顯示方案（附富文本編輯方案）

因爲項目中須要使用到富文本顯示和編輯，這方面手機還真是不如前端，一查富文本編輯幾乎都是前端的，目前富文本顯示主要有3種方案，先簡單介紹下：

1. 使用Html.fromHtml

• Html.fromHtml解析
• TextView顯示解析結果
• 標籤及樣式支持較少，圖片顯示得單獨處理（前端富文本框架建立的內容，這種方式就不是很適用了，標籤樣式太多）

tvAttachTask.text = Html.fromHtml("負責任務<font color=\"#479CD9\">${it[1]}</font>個，已完成<font color=\"#479CD9\">${it[0]}</font>個")
複製代碼

2. 自行解析html標籤

• 針對具體的標籤樣式進行解析
• 用Span或者原生控件組合顯示
• 須要本身作解析處理，沒解析到的就顯示不了

固然，開源大法好github上已經有人作了

3. WebView加載

• 簡單快捷
• 標籤基本都支持
• 須要作一些處理 感受性能開銷大（特別是像咱們項目中連評論回覆都是富文本）

這裏你們擇優選用吧，這裏介紹下第三種方案....

---

###################我是漂亮的分割線###################

---

具體實現

1 核心方法

//聽說這種方式有問題，待驗證
loadData(html, "text/html", "UTF-8")
//實際使用這種方式沒問題
loadDataWithBaseURL(null, html, "text/html", "UTF-8", null)
複製代碼

2 基本使用

val html = """ <p style="text-align: center; "><span style="font-size: 18px; background-color: rgb(255, 255, 255); color: rgb(255, 0, 0); font-weight: bold; font-style: italic;">任務描述</span></p> <p style="text-align: left;"><span style="font-size: 18px; background-color: rgb(255, 255, 255); color: rgb(255, 0, 0); font-weight: bold; font-style: italic;">任務描述任務描述</span></p> <p style="text-align: right;"><span style="font-size: 18px; background-color: rgb(255, 255, 255); color: rgb(255, 0, 0); font-weight: bold; font-style: italic;">任務描述任務描述任務描述</span></p> <p style="text-align: center; "><img src="http://www.bjdalisi.com/uploads/flash/1804101056357681.jpg"></p> <p style="text-align: center; "><br></p> <p style="text-align: center; ">jjj</p> <p style="text-align: center; ">hjj</p> <p style="text-align: center; "><br></p> <p style="text-align: center; "><br></p> <p style="text-align: center; "><br></p> <p style="text-align: left;">bjju<i>hjjj</i> <embed src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" /> <img src="http://www.bjdalisi.com/uploads/flash/1804101056357681.jpg"></p> """

    val webView = findViewById(R.id.webView)
    //取消滾動條
    webView.setScrollBarStyle(View.SCROLLBARS_OUTSIDE_OVERLAY)
    //不支持縮放功能
    webView.getSettings().setSupportZoom(false)
    webView.loadDataWithBaseURL(null, html, "text/html", "UTF-8", null)
複製代碼

3 顯示問題處理

上面的html在Chrome上顯示，好像沒有什麼問題，可是在手機上顯示，竟然能夠左右滑動，這樣確定交不了差的。

implementation 'org.jsoup:jsoup:1.11.3'
複製代碼

• 處理連接不能換行問題

/** 修復 a 標籤 **/
    private fun fixA(doc: Document) {
        //這裏咱們使用 jsoup 修改 a 的屬性:
        val `as` = doc.getElementsByTag("a")
        for (i in 0 until `as`.size) {
            val tempA = `as`[i]
            tempA.attr("style", "word-break: break-word")
        }
    }
複製代碼

• 處理圖片過大拖動問題

/** 修復 img 標籤 **/
    private fun fixImg(doc: Document) {
        //使用 jsoup 修改 img 的屬性:
        val images = doc.getElementsByTag("img")
        for (i in 0 until images.size) {
            //寬度最大100%，高度自適應
            images[i].attr("style", "max-width: 100%; height: auto;")
        }
    }
複製代碼

• 處理視頻問題

/** 修復 embed 標籤 **/
    private fun fixEmbed(doc: Document) {
        //使用 jsoup 修改 embed 的屬性:
        val embeds = doc.getElementsByTag("embed")
        for (element in embeds) {
            //寬度最大100%，高度自適應
            element.attr("style", "max-width: 100%; height: auto;")
                    .attr("controls", "controls")
        }
        //webview 沒法正確識別 embed 爲視頻時，須要這個標籤改爲 video 手機就能夠識別了
        doc.select("embed").tagName("video")
    }
複製代碼

4 點擊問題

通過前一個步驟的處理，富文本顯示是沒什麼問題了，至少我在使用上沒什麼問題了，可是點擊連接直接就跳轉到瀏覽器了，圖片點擊不能方法預覽呢？產品大大找麻煩怎麼辦？不作了仍是作不了？別急，so easy...

上面咱們引入了jsoup，再配合咱們原生交互起來就O啦！具體操做以下：

• 注入方法

private inner class PreViewJs {
        //@JavascriptInterface註解方法，js端調用，4.2之後安全
        @JavascriptInterface
        fun onTagClick(url: String, info: String) {
        }
    }
    ...
    webView.settings.javaScriptEnabled = true
    webView.settings.domStorageEnabled = true
    ...
    addJavascriptInterface(PreViewJs(), "PreViewJs")
複製代碼

• jsoup修改html

這裏僅用img標籤處理作示範：

/** 修復 img 標籤 **/
    private fun fixImg(doc: Document) {
        //使用 jsoup 修改 img 的屬性:
        val images = doc.getElementsByTag("img")
        for (i in 0 until images.size) {
            //寬度最大100%，高度自適應
            images[i].attr("style", "max-width: 100%; height: auto;")
                    //點擊調用原生傳參
                    .attr("onclick", """PreViewJs.onTagClick(this.src,'富文本圖片.jpg')""")
        }
    }
複製代碼

詳見demo....

附：

1. 本文demo：github.com/joker-fu/Ri…

2. 富文本編輯：github.com/joker-fu/Ri…