????????????????富文本在鴻蒙系統(tǒng)如何展示和編輯的？在文章開(kāi)頭我們提出這個(gè)疑問(wèn)，帶著疑問(wèn)來(lái)閱讀這篇文章。

????????????????富文本用途可以展示圖文混排的內(nèi)容，在日常App 中非常常見(jiàn)，比如微博的發(fā)布與展示，朋友圈的發(fā)布與展示，都在使用富文本的編輯與展示。通常我們需要標(biāo)注不同顏色文本，比如話題，#富文本編輯與展示#，@鴻蒙開(kāi)發(fā)者等，這些都要在編輯時(shí)或者發(fā)布后展示時(shí)標(biāo)注不同的字體顏色。

一、功能富文本編輯

????????????

我們?nèi)绾螌?shí)現(xiàn)上邊這個(gè)富文本編輯器呢，在鴻蒙中通過(guò)RichEditor實(shí)現(xiàn)，由于官網(wǎng)對(duì)RichEditor示例太多，很多開(kāi)發(fā)者找不到自己想要的結(jié)果，或者對(duì)應(yīng)的使用實(shí)例，下面幾個(gè)部分，基本滿足大部分開(kāi)發(fā)者需求的編寫(xiě)。首先上邊有四個(gè)主要部分，

1、@某人 的實(shí)現(xiàn)；主要包括@某人的添加和刪除，通過(guò)添加@某人，可以看到添加的時(shí)候?qū)︻伾M(jìn)行標(biāo)紅，并設(shè)置字體大小。

addAltInfo = (referInfo: ReferInfo) => {this.referInfos.push(referInfo)let tempText = `@${referInfo.mUserName} `this.richEditorController.addTextSpan(tempText,{style: {fontColor: $r("app.color.v5_theme_color"),fontSize: 15}})
}

添加完刪除時(shí)候我們需要判斷是否以@開(kāi)頭，如果已@開(kāi)頭就把Span相關(guān)的全部刪掉。否則就按照系統(tǒng)本身刪除 即可。

if (needValue.startsWith("@")) {// @時(shí)候刪除全部for (let index = 0; index < this.referInfos.length; index++) {let referInfo = this.referInfos[index] as ReferInfolet altNickname = `@${referInfo.mUserName} `if (altNickname == needValue) {this.referInfos.splice(index, 1)this.richEditorController.deleteSpans({ start, end })deleteFlag = false}}
}

2、#話題內(nèi)容# 的實(shí)現(xiàn)與@某人相似，通過(guò)#選的話題#，這樣來(lái)設(shè)置添加文本的顏色，字體大小等

addTopic = (topic: string) => {this.richEditorController.addTextSpan(topic,{style: {fontColor: $r("app.color.v5_theme_color"),fontSize: 15}})
}

如果在刪除時(shí)候，我們判斷一下span內(nèi)人字符串是已#開(kāi)始，我們認(rèn)為他是輸入的話題，這時(shí)候我們需要把他的字體顏色改變?yōu)槠胀ㄎ谋镜念伾?#xff0c;這樣就可以變成普通文本了。目前我是以#開(kāi)始計(jì)算的，你也可以加上以#開(kāi)始，并且#結(jié)束的時(shí)候才改變其顏色。我認(rèn)為以#開(kāi)始已經(jīng)足夠了。

 if (needValue.startsWith("#")) {this.richEditorController.updateSpanStyle({start: start,end: end,textStyle: {fontColor: $r("app.color.title"),fontSize: 15}})
}

3、自定義表情實(shí)現(xiàn)，就是我們App 內(nèi)自己定義一些相關(guān)的表情符號(hào)，選擇對(duì)應(yīng)的表情，以圖片的形式存放在發(fā)布微博中。這里FaceID就是我們圖片資源?？梢栽O(shè)置圖片的大小，根據(jù)自己需求設(shè)置大小。表情的刪除因?yàn)槭荌mageSpan所以表情就一塊刪掉了，不用擔(dān)心刪除一半問(wèn)題。直接按照系統(tǒng)方法走刪除的邏輯就可以了。

addFace = (faceId: Resource) => {this.richEditorController.addImageSpan(faceId,{imageStyle: {size: [16, 16]}})this.addDefaultStyle()
}

4、基本文本文字輸入我們有二種方案，第一種就是每次輸入完之后加一個(gè)空格，來(lái)改變后邊字體的顏色的字體大小，這樣就不會(huì)每次跟著前邊的字體大小和顏色了。還有一種就是在每次輸入完更新輸入的字體顏色，把自己輸入改為默認(rèn)顏色即可。二種目前都不是最優(yōu)解，但是可以解決臨時(shí)現(xiàn)在的問(wèn)題，如果大家有好的辦法我們一起交流。目前華為官網(wǎng)也沒(méi)有很好的例子來(lái)實(shí)現(xiàn)。

addDefaultStyle(text?: string) {let tempText = " "if (text) {tempText = text}this.richEditorController.addTextSpan(tempText,{style: {fontColor: $r("app.color.title"),fontSize: 15}})
}

這種是在每次文本輸入的時(shí)候改變文本的顏色。

.onDidIMEInput((textRange: TextRange) => {this.richEditorController.updateSpanStyle({start: textRange.start,end: textRange.end,textStyle: {fontColor: $r("app.color.title"),fontSize: 15}})
})

5、實(shí)時(shí)獲取文本輸入的長(zhǎng)度字?jǐn)?shù)，以控制最大輸入長(zhǎng)度。實(shí)現(xiàn)方法就是通過(guò)getSpans()或者所有的文本，如果是ImageSpan替換成對(duì)應(yīng)的字符串計(jì)算字符。其他的按照文本方式計(jì)算。直接累加字符串得到最后的文本。得到文本直接獲取他的長(zhǎng)度即可。

getInputResult = (): string => {let resultStr: string = ""let resultList = this.richEditorController.getSpans()for (let result of resultList) {if (typeof (result as RichEditorImageSpanResult)['imageStyle'] != 'undefined') {let valueResourceStr = (result as RichEditorImageSpanResult).valueResourceStrif (valueResourceStr) {let index = FaceList.getRealIds().indexOf(valueResourceStr.toString())let faceStr = FaceList.faceNameStr[index]resultStr += faceStr}} else {let value = (result as RichEditorTextSpanResult).valueresultStr += value}}return resultStr
}

6、對(duì)于輸入框編輯器對(duì)文本的限制，我們可以通過(guò)將要輸入內(nèi)容是否還接收數(shù)據(jù)來(lái)實(shí)現(xiàn)，如果已經(jīng)達(dá)到我們要求的最大長(zhǎng)度我們可以將onWillChange設(shè)置成false來(lái)表示不在接收數(shù)據(jù)即可。

.onWillChange((_changeValue) => {if (this.getInputResult().length >= this.maxLength) {return false}return true
})

通過(guò)監(jiān)聽(tīng)onDidChange輸入之后數(shù)據(jù)改變實(shí)現(xiàn)輸入后數(shù)據(jù)的變化和輸入長(zhǎng)度展示。

.onDidChange((_callback) => {this.inputDataChange(this.getInputResult())
})

通過(guò)上邊幾個(gè)部分的講解，我們基本完成的富文本編輯在鴻蒙上邊的實(shí)現(xiàn)，可以通過(guò)上邊步驟實(shí)現(xiàn)類似微博的發(fā)布功能，主要包括文本輸入，#話題選擇#，@某人，文本刪除的功能，基本滿足的富文本編輯的需求，如果有不滿足的你的需求，可以私信我，我們一起探討，歡迎你的提起，我們一起進(jìn)步，共同成長(zhǎng)。

二、富文本的展示

富文本的展示指的什么，我們需要展示哪些內(nèi)容；首先舉個(gè)例子，文本中鏈接、#話題#、@鴻蒙開(kāi)發(fā)者、表情圖標(biāo)等這些內(nèi)容需要再展示時(shí)候標(biāo)注特殊的顏色，點(diǎn)擊時(shí)候我們需要跳轉(zhuǎn)到對(duì)應(yīng)的界面，在鴻蒙中我們?cè)趺丛谝淮淖治谋局?#xff0c;對(duì)不同文字設(shè)置不同的顏色，并且在點(diǎn)擊時(shí)候跳轉(zhuǎn)對(duì)應(yīng)的界面呢，展示文字中的圖片呢，帶著這些問(wèn)題我們來(lái)看下邊的內(nèi)容。

首先鴻蒙提供了文本展示器Text，我們可以通過(guò)Text展示，但是如果想特殊標(biāo)記顏色，我們就需要對(duì)文本進(jìn)行分割了，分割出每段要展示的內(nèi)容。這里我們以#話題#，鏈接為例進(jìn)行分割。這里以通過(guò)正則表達(dá)式分割之后，以#結(jié)束的，我們認(rèn)為是話題類型，否則認(rèn)為是長(zhǎng)鏈接。這里的分割內(nèi)容是把#話題#，長(zhǎng)鏈接分割分割出來(lái)。分割出來(lái)之后，我們通過(guò)字符串把整個(gè)文本進(jìn)行分割成不同內(nèi)容。最后分割成三種類型，普通文本、話題、長(zhǎng)鏈接類型，然后根據(jù)類型，展示對(duì)應(yīng)的問(wèn)題，如果需要跳轉(zhuǎn)點(diǎn)擊文本時(shí)候進(jìn)行跳轉(zhuǎn)。@某人、表情符號(hào)分割和這個(gè)類似方式，這里不再重復(fù)表述。如有疑問(wèn)請(qǐng)私信提出。

export function splitContent(str: string): LinkTextModel[] {let data =str.match(/(#([^#]+)#)|(https?|rtsp):\/\/[a-zA-Z0-9\-\.]+\.[a-zA-Z0-9]{2,}(:[0-9]{1,5})?(\/[\S]*)?|(?<!\S)[a-zA-Z0-9\-]+(\.[a-zA-Z0-9]{2,})+(?!\S|\@)/gi);let result: LinkTextModel[] = [];let start = 0;let tempStr = strdata?.forEach((value) => {let tempIndex = tempStr.indexOf(value)result.push({ type: LinkTextEnum.COMMON, content: tempStr.slice(start, tempIndex) })if (value.startsWith("#")) {result.push({ type: LinkTextEnum.TOPIC, content: value })} else {result.push({ type: LinkTextEnum.URl, content: value })}tempStr = tempStr.substring(tempIndex + value.length)});result.push({ type: LinkTextEnum.COMMON, content: tempStr })return result;
}

分割好的文本是一段一段的，我們需要把這些一段一段的展示出來(lái)。如下圖所示，根據(jù)分割的類型展示不同顏色的問(wèn)題。這里我們?cè)赥ext里面用，Span展示文本，設(shè)置字體顏色。通過(guò)ImageSpan展示圖標(biāo)來(lái)展示表情。

  Text() {ForEach(this.allTextList, (item: LinkTextModel) => {if (item.type === LinkTextEnum.TOPIC) {ForEach(splitFace(item.content), (item: LinkChildModel) => {if (item.type === LinkTextEnum.Face && item.faceId) {ImageSpan(item.faceId).width(16).height(16)} else {Span(item.content).fontColor("#A34444").onClick(() => {// 跳轉(zhuǎn)話題詳情})}})
?} else if (item.type === LinkTextEnum.URl) {Span(item.content).fontColor("#A34444").onClick(() => {// 跳轉(zhuǎn)Web加載頁(yè)面，加載web地址})} else if (item.type == LinkTextEnum.ALT) {Span(item.content).fontColor("#A34444").onClick(() => {// alt 分割跳轉(zhuǎn)個(gè)人詳情})} else {ForEach(splitFace(item.content), (item: LinkChildModel) => {if (item.type === LinkTextEnum.Face && item.faceId) {ImageSpan(item.faceId).width(16).height(16)} else {Span(item.content)}})}})}.fontSize(14).fontColor("#333333").width(CommonConstants.MATCH_PARENT).margin({ top: 5 }).padding({ left: 12, right: 12 })
}

閱讀本文章，我們已經(jīng)了解了富文本編輯器的實(shí)現(xiàn)，可以按照步驟一步一步實(shí)現(xiàn)自己的富文本編輯器，也學(xué)會(huì)富文本的展示，通過(guò)正則表達(dá)式分割自己需要的內(nèi)容，然后通過(guò)Text中的span、imagespan組件展示分割的內(nèi)容，本章節(jié)就介紹這些東西。后續(xù)章節(jié)我將依次從簡(jiǎn)入深，講解鴻蒙的開(kāi)發(fā)中遇到各種問(wèn)題。歡迎大家一起交流。如果你在鴻蒙開(kāi)發(fā)中遇到難點(diǎn)，不會(huì)的可以私信我，根據(jù)我最近的開(kāi)發(fā)經(jīng)歷，已經(jīng)基本踩完大部分坑，一起交流使我們共同進(jìn)步。

????