uni-app中使用富文本rich-text个人经验

rich-text是在uni-app一个内置组件,用于高性能地渲染富文本内容。先贴一下官方的属性列表:

uni-app富文本rich-text

先说一下“selectable” 长按选择区域复制,这个我在APP项目中 不起作用,可能像文档说的,只支持“百度小程序”吧。在APP端起作用的话,可以做如下修改,在样式中添加下面样式代码

.content-select-copy {-webkit-user-select: text;-moz-user-select: text;-ms-user-select: text;user-select: text;
}

模板中调用的时候加上面样式

 <view class="content-select-copy" ><rich-text :selectable='true'   :nodes="content"   @itemclick="handleRichText"></rich-text>
</view>

这样就可以在APP端实现长按选择区域复制了。

然后再说一下事件处理itemclick,我们可以使用这个事件实现对rich-text里面的节点内容进行处理,不过只能处理a和img标签,这个上面官方文档已经说明。

使用示例:

比如要对富文本内容中的所有链接跳到指定中转页再跳转,代码如下:

//假设我的rich-text类型为节点类型(rich-text支持节点数组或者字符串类型)
handleRichText(e){ //这里对应我上面模板中的itemclick指定的处理方法名称if(e.detail.node.name == 'a') {let url = e.detail.node.attrs.hreflet jumpurl = '/jumpurl?url='+encodeURIComponent(url )//这里我直接拉起系统浏览器访问,也可以使用 uni.navigateTo在app内部跳转this.openLink(jumpurl) }
}

对于rich-text是使用节点数组还是字符串,根据自己需求而定,如果字符串的话,可以直接写个正则替换。比如:

function replaceLinks(text) {  // 正则表达式匹配<a>标签的href属性  // 注意:这个正则表达式可能无法处理所有复杂的HTML情况  var regex = /<a\s+[^>]*href=(\"??)([^\" >]*?)(\"??)[^>]*>([^<]*)<\/a>/gi;  return text.replace(regex, function(match, quote1, url, quote2, textInside) {  // 验证URL(可选,取决于你的需求)  if (url) {  // 替换为新的链接格式  return '<a href="/jumpurl?url=' + encodeURIComponent(url) + '">' + textInside + '</a>';  }  return match;  });  
}   
content = replaceLinks(content);  

不过我建议用数组节点,后端将富文本处理为节点数组返回给前端,这样有两个好处,一是前端处理起来比较方便 ,另外一点就是性能问题,后端处理好之后,前端直接使用数组,性能会更好。这点官方文档也有说明:“nodes 值为 HTML String 时,在组件内部将自动解析为节点列表,推荐直接使用 Array 类型避免内部转换导致的性能下降”。不过要将一段HTML富文本处理成节点数组,对后端来说,也是比较麻烦的,如果使用PHP,可使用PHP DOMDocument,参考我前面的例子。PHP 转换HTML 为节点数组 – AI小站 (aisites.cn)。如果是python可以使用BeautifulSoup处理,java可以使用Jsoup

文章地址 uni-app中的富文本rich-text使用经验 – AI小站 (aisites.cn)

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

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

相关文章

CUDA系列-Mem-9

这里写目录标题 Static Architecture.Abstractions provided by CUSW_UNIT_MEM_MANAGERMemory Object (CUmemobj) Memory Descriptor(CUmemdesc)Memory Block(CUmemblock)Memory BinsSuballocations in Memory BlockFunctional description Memory Manager 你可能觉得奇怪&…

使用SQLite

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 与许多其他数据库管理系统不同&#xff0c;SQLite不是一个客户端/服务器结构的数据库引擎&#xff0c;而是一种嵌入式数据库&#xff0c;它的数据库就…

Centos 配置安装Mysql

linux安装配置mysql的方法主要有yum安装和配置安装两种&#xff0c;由于yum安装比较简单&#xff0c;但是会将文件分散到不同的目录结构下面&#xff0c;配置起来比较麻烦&#xff0c;这里主要研究一下配置安装mysql的方法 1、环境说明 centos 7.9 mysql 5.7.372、环境检查 …

反激式开关电源是如何工作的

反激的变压器可以看作一个带变压功能的电感&#xff0c;是一个buck-boost电路。 反击式开关变压器 反激式开关电源是指使用反激高频变压器隔离输入输出回路的开关电源。“反激”指的是在开关管接通的情况下&#xff0c;当输入为高电平时输出线路中串联的电感为放电状态&#x…

ABAP-03基础数据类型

基本数据类型 数据类型默认大小&#xff08;byte&#xff09;有效大小初始值说明示例C11-65535SPACE文本字符&#xff08;串&#xff09;‘Name’N11-65535‘00…0’数字文本‘0123’T66‘000000’时间(HHMMSS)‘123010’D88‘00000000’日期(yyyymmdd)‘20090901’I4-231~232…

算法基础精选题单 动态规划(dp)(递推+线性dp)(个人题解)

前言&#xff1a; 一些简单的dp问题。 正文&#xff1a; 题单&#xff1a;237题】算法基础精选题单_ACM竞赛_ACM/CSP/ICPC/CCPC/比赛经验/题解/资讯_牛客竞赛OJ_牛客网 (nowcoder.com) 递推&#xff1a; NC235911 走楼梯&#xff1a; #include<bits/stdc.h> using na…

在k8s上部署一个简单的应用

部署一个简单的应用 实验目标&#xff1a; 部署一个简单的 web 应用&#xff0c;比如 Nginx 或者一个自定义的 Node.js 应用。 实验步骤&#xff1a; 创建一个 Deployment。创建一个 Service 来暴露应用。验证应用是否可以通过 Service 访问。 今天我们来做一下昨天分享的可…

Debian12的#!bash #!/bin/bash #!/bin/env bash #!/usr/bin/bash #!/usr/bin/env bash

bash脚本开头可写成 #!/bin/bash , #!/bin/env bash , #!/usr/bin/bash , #!/usr/bin/env bash #!/bin/bash , #!/usr/bin/bash#!/bin/env bash , #!/usr/bin/env bash Debian12的 /bin 是 /usr/bin 的软链接, /sbin 是 /usr/sbin 的软链接, (Debian12默认没有ll命令,用的ls …

Python的pandas读取excel文件中的数据

一、前言 hello呀&#xff01;各位铁子们大家好呀&#xff0c;我是一个在软件测试行业摸爬滚打十几年的老江湖了&#xff0c;今天呢来和大家聊一聊用Python的pandas读取excel文件中的数据。 二、读取Excel文件 使用pandas的read_excel()方法&#xff0c;可通过文件路径直接读…

Techviz:XR协作工作流程,重塑远程电话会议新形式

在当今快速发展的数字环境中&#xff0c;无缝远程协作的需求正在成为企业多部门协同工作的重中之重&#xff0c;尤其是对于制造业、建筑和设计等行业的专业人士而言&#xff0c;这一需求更加迫切。传统的远程电话会议协作形式存在着延滞性&#xff0c;已经渐渐跟不上当今快节奏…

项目三OpenStack基础环境配置与API使用

任务一 了解OpenStack基础环境配置 1.1 •数据库服务器 1.2 •消息队列服务 •AMQP系统的组成 任务二 了解并使用OpenStack API 2.1 •什么是RESTful API • RESTful API 是目前比较成熟的 一套Internet应用程序的API软件架构 。 • 表现 层&#xff08; Representation …

汽车IVI中控开发入门及进阶(三十一):视频知识扫盲

有效的视频资源管理需要集成许多不同的底层技术,共同为用户提供给定应用程序的最佳体验。其中许多技术是从早期电视广播中使用的技术演变而来的。其他方法,如用于通过网络流式传输视频的压缩方法,相对较新且不断发展。 以下详细概述了与图形和视频处理和传输相关的一些基本…

云上宝库:三大厂商对象存储安全性及差异性比较

前言 看了几家云厂商的对象存储&#xff0c;使用上有相似也有差异&#xff0c;聊聊阿里云、腾讯云、京东云三家对象存储在使用中存在的风险以及防护措施。 0x01 云存储命名 阿里云对象存储OSS(Object Storage Service)&#xff0c;新用户免费试用三个月&#xff0c;存储包容…

安装idea后配置的全局配置

1、打开IDEA应用&#xff1a;Customize→All settings...&#xff0c;如果启动IDEA后&#xff0c;默认打开的是之前的项目&#xff0c;可以关闭当前项目&#xff1a;File→Close Project&#xff0c;就退到全局配置界面了。 2、打开全局配置界面&#xff1a;Editor→File Encod…

斯巴达(Spartanhost)VPS的性能评测

原创原文链接&#xff1a;详细斯巴达&#xff08;Spartanhost&#xff09;VPS的性能和购买价值评测 | BOBO Blog (soulcloser.com)https://www.soulcloser.com/3398/ 引言 最近看了全球的VPS商家&#xff0c;想搞台网站高性能的服务器&#xff0c;发现一个特别有意思的商家竟…

Mathtype7永久无限免费安装包下载地址2024最新方法步骤

亲爱的数学爱好者们&#xff0c;今天我要分享一个让数学表达变得超级简单的神器——Mathtype7最新破解版&#xff01;&#x1f389; 这不仅仅是个软件&#xff0c;而是打开高效学习和工作的钥匙。准备好了吗&#xff1f;让我们一起探索这个神奇的工具&#xff01; MathType最新…

通过ModelScope开源Embedding模型将图片转换为向量

本文介绍如何通过ModelScope魔搭社区中的视觉表征模型将图片转换为向量&#xff0c;并入库至向量检索服务DashVector中进行向量检索。 ModelScope魔搭社区旨在打造下一代开源的模型即服务共享平台&#xff0c;为泛AI开发者提供灵活、易用、低成本的一站式模型服务产品&#xf…

空间复杂度的相关概念

1. 空间复杂度 空间复杂度&#xff08;space complexity&#xff09;用于衡量算法占用内存空间随着数据量变大时的增长趋势。 统计哪些空间&#xff1a; ● 暂存数据&#xff1a;用于保存算法运行过程中的各种常量、变量、对象等。 ● 栈帧空间&#xff1a;用于保存调用函数…

keil MDK自动生成带版本bin文件

作为嵌入式单片机开发&#xff0c;在Keil MDK&#xff08;Microcontroller Development Kit&#xff09;中开发完编译完后&#xff0c;经常需要手动进行版本号添加用于发版&#xff0c;非常麻烦&#xff0c;如果是对外发行的话&#xff0c;更容易搞错&#xff0c;特此码哥提供一…

SpringCloud Alibaba Sentinel 流量控制之流控模式实践总结

官网文档&#xff1a;https://sentinelguard.io/zh-cn/docs/flow-control.html wiki地址&#xff1a;https://github.com/alibaba/Sentinel/wiki/%E6%B5%81%E9%87%8F%E6%8E%A7%E5%88%B6 本文版本&#xff1a;spring-cloud-starter-alibaba&#xff1a;2.2.0.RELEASE 如下图所…