鸿蒙中富文本编辑与展示

                富文本在鸿蒙系统如何展示和编辑的？在文章开头我们提出这个疑问，带着疑问来阅读这篇文章。

                富文本用途可以展示图文混排的内容，在日常App 中非常常见，比如微博的发布与展示，朋友圈的发布与展示，都在使用富文本的编辑与展示。通常我们需要标注不同颜色文本，比如话题，#富文本编辑与展示#，@鸿蒙开发者等，这些都要在编辑时或者发布后展示时标注不同的字体颜色。

一、功能富文本编辑

            

我们如何实现上边这个富文本编辑器呢，在鸿蒙中通过RichEditor实现，由于官网对RichEditor示例太多，很多开发者找不到自己想要的结果，或者对应的使用实例，下面几个部分，基本满足大部分开发者需求的编写。首先上边有四个主要部分，

1、@某人 的实现；主要包括@某人的添加和删除，通过添加@某人，可以看到添加的时候对颜色进行标红，并设置字体大小。

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}})
}

添加完删除时候我们需要判断是否以@开头，如果已@开头就把Span相关的全部删掉。否则就按照系统本身删除 即可。

if (needValue.startsWith("@")) {// @时候删除全部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、#话题内容# 的实现与@某人相似，通过#选的话题#，这样来设置添加文本的颜色，字体大小等

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

如果在删除时候，我们判断一下span内人字符串是已#开始，我们认为他是输入的话题，这时候我们需要把他的字体颜色改变为普通文本的颜色，这样就可以变成普通文本了。目前我是以#开始计算的，你也可以加上以#开始，并且#结束的时候才改变其颜色。我认为以#开始已经足够了。

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

3、自定义表情实现，就是我们App 内自己定义一些相关的表情符号，选择对应的表情，以图片的形式存放在发布微博中。这里FaceID就是我们图片资源。可以设置图片的大小，根据自己需求设置大小。表情的删除因为是ImageSpan所以表情就一块删掉了，不用担心删除一半问题。直接按照系统方法走删除的逻辑就可以了。

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

4、基本文本文字输入我们有二种方案，第一种就是每次输入完之后加一个空格，来改变后边字体的颜色的字体大小，这样就不会每次跟着前边的字体大小和颜色了。还有一种就是在每次输入完更新输入的字体颜色，把自己输入改为默认颜色即可。二种目前都不是最优解，但是可以解决临时现在的问题，如果大家有好的办法我们一起交流。目前华为官网也没有很好的例子来实现。

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

这种是在每次文本输入的时候改变文本的颜色。

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

5、实时获取文本输入的长度字数，以控制最大输入长度。实现方法就是通过getSpans()或者所有的文本，如果是ImageSpan替换成对应的字符串计算字符。其他的按照文本方式计算。直接累加字符串得到最后的文本。得到文本直接获取他的长度即可。

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、对于输入框编辑器对文本的限制，我们可以通过将要输入内容是否还接收数据来实现，如果已经达到我们要求的最大长度我们可以将onWillChange设置成false来表示不在接收数据即可。

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

通过监听onDidChange输入之后数据改变实现输入后数据的变化和输入长度展示。

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

通过上边几个部分的讲解，我们基本完成的富文本编辑在鸿蒙上边的实现，可以通过上边步骤实现类似微博的发布功能，主要包括文本输入，#话题选择#，@某人，文本删除的功能，基本满足的富文本编辑的需求，如果有不满足的你的需求，可以私信我，我们一起探讨，欢迎你的提起，我们一起进步，共同成长。

二、富文本的展示

富文本的展示指的什么，我们需要展示哪些内容；首先举个例子，文本中链接、#话题#、@鸿蒙开发者、表情图标等这些内容需要再展示时候标注特殊的颜色，点击时候我们需要跳转到对应的界面，在鸿蒙中我们怎么在一串文字文本中，对不同文字设置不同的颜色，并且在点击时候跳转对应的界面呢，展示文字中的图片呢，带着这些问题我们来看下边的内容。

首先鸿蒙提供了文本展示器Text，我们可以通过Text展示，但是如果想特殊标记颜色，我们就需要对文本进行分割了，分割出每段要展示的内容。这里我们以#话题#，链接为例进行分割。这里以通过正则表达式分割之后，以#结束的，我们认为是话题类型，否则认为是长链接。这里的分割内容是把#话题#，长链接分割分割出来。分割出来之后，我们通过字符串把整个文本进行分割成不同内容。最后分割成三种类型，普通文本、话题、长链接类型，然后根据类型，展示对应的问题，如果需要跳转点击文本时候进行跳转。@某人、表情符号分割和这个类似方式，这里不再重复表述。如有疑问请私信提出。

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;
}

分割好的文本是一段一段的，我们需要把这些一段一段的展示出来。如下图所示，根据分割的类型展示不同颜色的问题。这里我们在Text里面用，Span展示文本，设置字体颜色。通过ImageSpan展示图标来展示表情。

  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(() => {// 跳转话题详情})}})
​} else if (item.type === LinkTextEnum.URl) {Span(item.content).fontColor("#A34444").onClick(() => {// 跳转Web加载页面，加载web地址})} else if (item.type == LinkTextEnum.ALT) {Span(item.content).fontColor("#A34444").onClick(() => {// alt 分割跳转个人详情})} 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 })
}

阅读本文章，我们已经了解了富文本编辑器的实现，可以按照步骤一步一步实现自己的富文本编辑器，也学会富文本的展示，通过正则表达式分割自己需要的内容，然后通过Text中的span、imagespan组件展示分割的内容，本章节就介绍这些东西。后续章节我将依次从简入深，讲解鸿蒙的开发中遇到各种问题。欢迎大家一起交流。如果你在鸿蒙开发中遇到难点，不会的可以私信我，根据我最近的开发经历，已经基本踩完大部分坑，一起交流使我们共同进步。

    

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/457224.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

LeetCode_231. 2 的幂_java

LeetCode_231. 2 的幂_java

1、题目 231. 2 的幂https://leetcode.cn/problems/power-of-two/ 给你一个整数 n&#xff0c;请你判断该整数是否是 2 的幂次方。如果是&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 如果存在一个整数 x 使得 n &#xff0c;则认为 n 是 2 的幂次方…
阅读更多...
ComfyUI初体验

ComfyUI初体验

ComfyUI 我就不过多介绍了&#xff0c;安装和基础使用可以看下面大佬的视频&#xff0c;感觉自己靠图文描述的效果不一定好&#xff0c;大家看视频比较方便。 ComfyUI全球爆红&#xff0c;AI绘画进入“工作流时代”&#xff1f;做最好懂的Comfy UI入门教程&#xff1a;Stable D…
阅读更多...
ArcGIS001:ArcGIS10.2安装教程

ArcGIS001:ArcGIS10.2安装教程

摘要&#xff1a;本文详细介绍arcgis10.2的安装、破解、汉化过程。 一、软件下载 安装包链接&#xff1a;https://pan.baidu.com/s/1T3UJ7t_ELZ73TH2wGOcfpg?pwd08zk 提取码&#xff1a;08zk 二、安装NET Framework 3.5 双击打开控制面板&#xff0c;点击【卸载程序】&…
阅读更多...
dbt-codegen: dbt自动生成模板代码

dbt-codegen: dbt自动生成模板代码

dbt项目采用工程化思维&#xff0c;数据模型分层实现&#xff0c;支持描述模型文档和测试&#xff0c;非常适合大型数据工程项目。但也需要用户编写大量yaml描述文件&#xff0c;这个过程非常容易出错且无聊。主要表现&#xff1a; 手工为dbt模型编写yaml文件&#xff0c;这过…
阅读更多...
STM32传感器模块编程实践(十一) ADC模数转换模块ADS1115简介及驱动源码

STM32传感器模块编程实践(十一) ADC模数转换模块ADS1115简介及驱动源码

文章目录 一.概要二.ADS1115芯片介绍三.ADS1115芯片主要特性四.ADS1115模块接线说明五.ADS1115参考原理图六.通讯协议介绍七.STM32单片机与ADS1115模块实现电压采集实验1.硬件准备2.软件工程3.软件主要代码4.实验效果 八.源代码工程下载九.小结 一.概要 ADC&#xff0c;全称为…
阅读更多...
认识和使用 Vite 环境变量配置，优化定制化开发体验

认识和使用 Vite 环境变量配置，优化定制化开发体验

Vite 官方中文文档&#xff1a;https://cn.vitejs.dev/ 环境变量 Vite 内置的环境变量如下&#xff1a; {"MODE": "development", // 应用的运行环境"BASE_URL": "/", // 部署应用时使用的 URL 前缀"PROD": false, //应用…
阅读更多...
JavaScript完整笔记

JavaScript完整笔记

JS引入 JavaScript 程序不能独立运行&#xff0c;它需要被嵌入 HTML 中&#xff0c;然后浏览器才能执行 JavaScript 代码。 通过 script 标签将 JavaScript 代码引入到 HTML 中&#xff0c;有两种方式&#xff1a; 内部方式 通过 script 标签包裹 JavaScript 代码 我们将 &…
阅读更多...
使用FRP搭建内网穿透服务（新版toml配置文件，搭配反向代理方便内网网站访问）【使用frp搭建内网穿透】

使用FRP搭建内网穿透服务（新版toml配置文件，搭配反向代理方便内网网站访问）【使用frp搭建内网穿透】

FRP&#xff08;Fast Reverse Proxy&#xff09;是一个高性能的反向代理应用程序&#xff0c;主要用于内网穿透。它允许用户将内部网络服务暴露到外部网络&#xff0c;适用于 NAT 或防火墙环境下的服务访问。 他是一个开源的 服务 如果大家不想用 花生壳 软件&#xff0c;可以尝…
阅读更多...
卷积神经网络评价指标

卷积神经网络评价指标

1.评价指标的作用 1. 性能评估&#xff1a;评价指标提供了一种量化的方式来衡量CNN模型的性能。通过这些指标&#xff0c;我们可以了解模型在特定任务上的表现&#xff0c;比如图像分类、目标检测或图像分割等。 2. 模型比较&#xff1a;不同的模型架构或训练策略可能会产生不…
阅读更多...
基于SSM考研助手系统的设计

基于SSM考研助手系统的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;学生管理&#xff0c;教学秘书管理&#xff0c;考研资讯管理&#xff0c;考研名师管理&#xff0c;考研信息管理&#xff0c;系统管理 教学秘书账号功能包括&#xff1a;系统首页&#xff0c;个人中心…
阅读更多...
如何快速解决游戏提示系统中的emp.dll缺失问题

如何快速解决游戏提示系统中的emp.dll缺失问题

emp.dll是一个动态链接库&#xff08;Dynamic Link Library, DLL&#xff09;文件&#xff0c;这类文件在Windows操作系统中扮演着至关重要的角色。它们包含了可由多个程序同时使用的代码和数据&#xff0c;其主要目的是实现模块化&#xff0c;以便于程序的更新和动态链接。emp…
阅读更多...
es实现自动补全

es实现自动补全

目录 自动补全 拼音分词器 安装拼音分词器 第一步&#xff1a;下载zip包&#xff0c;并解压缩 第二步&#xff1a;去docker找到es-plugins数据卷挂载的位置&#xff0c;并进入这个目录 第三步&#xff1a;把拼音分词器的安装包拖到这个目录下 第四步&#xff1a;重启es 第…
阅读更多...
RV1126音视频学习（二）-----VI模块

RV1126音视频学习（二）-----VI模块

文章目录 前言2.RV1126的视频输入vi模块2.1什么是VI模块2.3RV1126VI模块主要APIRK_MPI_SYS_Init()RK_MPI_VI_SetChnAttrRK_MPI_VI_EnableChnRK_S32 RK_MPI_VI_DisableChnRK_MPI_VI_StartStreamRK_MPI_SYS_GetMediaBufferRK_MPI_MB_GetPtrRK_MPI_MB_GetSizeRK_MPI_MB_ReleaseBuf…
阅读更多...
【NOIP提高组】加分二叉树

【NOIP提高组】加分二叉树

【NOIP提高组】加分二叉树 &#x1f490;The Begin&#x1f490;点点关注&#xff0c;收藏不迷路&#x1f490; 设一个n个节点的二叉树tree的中序遍历为&#xff08;l,2,3,…,n&#xff09;&#xff0c;其中数字1,2,3,…,n为节点编号。每个节点都有一个分数&#xff08;均为正整…
阅读更多...
读《认知觉醒》：浅谈费曼技巧

读《认知觉醒》：浅谈费曼技巧

最近在阅读《认知觉醒》这本书&#xff0c;封面如下&#xff1a; 读到了里面对于费曼技巧的介绍&#xff08;在第八章&#xff09;&#xff0c;感觉受到了一些启发&#xff0c;在这里分享给大家。 其实之前很早就接触过了费曼技巧&#xff0c;但是并没有很好的应用起来&#x…
阅读更多...
零代码快速开发智能体 ｜甘肃旅游通

零代码快速开发智能体 ｜甘肃旅游通

零代码快速开发智能体 &#xff5c;甘肃旅游通 本文仅用于文心智能体的活动征文 参与人&#xff1a;mengbei_admin 文心智能体平台是人工智能领域的佼佼者。它拥有强大的语言理解与生成能力&#xff0c;能精准回应各种问题&#xff0c;出色完成文本创作、知识问答和翻译等任…
阅读更多...
线性表之双向链表

线性表之双向链表

链表花里胡哨&#xff0c;一应俱全 前言 在这之前&#xff0c;我们已经学习了单链表。我们发现这些链表都是一个接一个朝一个方向接下去&#xff0c;有时&#xff0c;我们想要查找某个结点的时候还得从头开始遍历查找&#xff0c;尽管我们已经学习了顺序表&#xff0c;查找某个…
阅读更多...
免费PDF页面提取小工具

免费PDF页面提取小工具

下载地址 https://download.csdn.net/download/woshichenpi/89922797 使用说明&#xff1a;PDF页面提取工具 1. 启动应用程序 双击程序的启动图标或者通过命令行运行程序。 2. 选择PDF文件 在应用程序窗口中找到“选择PDF”按钮并点击它。在弹出的文件选择对话框中&#x…
阅读更多...
Windows server 2003服务器的安装

Windows server 2003服务器的安装

Windows server 2003服务器的安装 安装前的准备&#xff1a; 1.镜像SN序列号 图1-1 Windows server 2003的安装包非常人性化 2.指定一个安装位置 图1-2 选择好安装位置 3.启动虚拟机打开安装向导 图1-3 打开VMware17安装向导 图1-4 给虚拟光驱插入光盘镜像 图1-5 输入SN并…
阅读更多...
Linux系统安装Redis详细操作步骤（二进制发布包安装方式）

Linux系统安装Redis详细操作步骤（二进制发布包安装方式）

安装方式介绍 在Linux系统中&#xff0c;安装软件的方式主要有四种&#xff0c;这四种安装方式的特点如下&#xff1a; 安装方式特点二进制发布包安装软件已经针对具体平台编译打包发布&#xff0c;只要解压&#xff0c;修改配置即可rpm安装软件已经按照redhat的包管理规范进…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023