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

news2024/9/18 13:13:41

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.href
        let 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.coloradmin.cn/o/1840625.html

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

相关文章

为数据安全护航,袋鼠云在数据分类分级上的探索实践

在大数据时代&#xff0c;数据具有多源异构的特性&#xff0c;且价值各异&#xff0c;企业需依据数据的重要性、价值指数等予以区分&#xff0c;以利采取不同的数据保护举措&#xff0c;避免数据泄露。故而&#xff0c;数据分类分级管理属于数据安全保护中极为重要的环节之一。…

正则表达式写起来不简单,但用起来真香

说在前面 &#x1f388;整理一些常见常用的正则表达式。 常见的正则表达式 1、手机号码 /^[1][3456789][0-9]{9}$/这个正则表达式 /^[1][3456789][0-9]{9}$/ 用于匹配中国的手机号码的一部分&#xff0c;但不包括全部有效的手机号码格式。下面是对它的详细解释&#xff1a; ^…

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

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

JavaWeb项目配置教程

将你的项目&#xff08;只有代码的文件&#xff0c;不是整个文件&#xff09;拖入idea 找到数据库配置代码&#xff08;一般在Util包里面&#xff0c;或者是properties配置文件&#xff09;并将密码修改为你的数据库密码。 点击Edit Configurations 点击Configure&#xff0…

突破数据存储瓶颈!转转业财系统亿级数据存储优化实践--图文解析

突破数据存储瓶颈&#xff01;转转业财系统亿级数据存储优化实践–图文解析 原文链接&#xff1a;https://juejin.cn/post/7358704806779437097 原文作者&#xff1a;转转技术团队 业财系统&#xff1a;业务和财务一体化系统 与传统财务记账不同&#xff0c;一笔金额不再是…

LED电子看板在提升企业数字化管理的应用价值

本文详细探讨 LED 电子看板在企业数字化管理中的应用价值&#xff0c;包括实时数据展示、可视化管理、提高生产效率、优化决策等方面&#xff0c;通过实际案例分析&#xff0c;阐述了其对企业发展的重要性。在当今数字化时代&#xff0c;企业管理面临着越来越多的挑战和机遇。为…

企业IT资源使用共享云桌面集中管理的优势

随着信息技术的飞速发展&#xff0c;企业面临着日益增长的IT资源需求和管理挑战。为了解决这一问题&#xff0c;越来越多的企业开始采用云桌面集中管理方案&#xff0c;以实现IT资源的共享和优化。 为保持企业各部门信息化和数字化业务顺利运转&#xff0c;IT需要耗费大量支持…

【BFS算法】广度搜索·由起点开始逐层向周围扩散求得最短路径(算法框架+题目)

0、前言 深度优先搜索是DFS&#xff08;Depth Frst Search)&#xff0c;其实就是前面所讲过的回溯算法&#xff0c;它的特点和它的名字一样&#xff0c;首先在一条路径上不断往下&#xff08;深度&#xff09;遍历&#xff0c;获得答案之后再返回&#xff0c;再继续往下遍历。…

使用SQLite

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

微量氧传感器在3D打印中的应用

3D打印为什么需要监测氧气&#xff1f; 金属 3D 打印过程涉及使用激光技术将细金属粉末一层一层地熔合在一起。在制造零件的同时将杂质风险降至比较低是金属增材制造行业面临的主要挑战。金属 3D 打印机通常将其原料送入惰性环境中&#xff0c;以消除污染并防止质量问题。氩气…

【自撰写】【国际象棋入门】第6课 常见术语分析(一)吃双和抽将

第6课 常见术语分析&#xff08;一&#xff09;吃双和抽将 本次课中&#xff0c;我们介绍几种最为常见和常用的&#xff08;单步棋形成&#xff09;的局面、术语并对其进行简单的分析。一般说来&#xff0c;这些局面都会给予一方以“立竿见影”的优势&#xff0c;或者引向之后…

瑞尼克定制聚四氟乙烯布氏漏斗配抽滤瓶四氟抽滤装置药厂

一、产品介绍 布氏漏斗是实验室中使用的一种仪器&#xff0c;用来使用真空或负压力抽吸进行过滤。布氏漏斗可代替陶瓷布氏漏斗&#xff0c;避免碎裂&#xff0c;聚四氟乙烯材质的布氏漏斗性强&#xff0c;使用真空或负压力抽吸进行过滤也可与吸滤瓶配套&#xff0c;用于无机制…

window 卸载应用商店程序

# 使用Get-AppxPackage获取所有应用程序 # 使用Remove-AppxPackage PythonSoftwareFoundation.Python.3.12_3.12.1264.0_x64__qbz5n2kfra8p0

2024请收好这一份全面--详细的AI产品经理从业指南

前言 入行人工智能领域这段时间以来&#xff0c;从零到一把AI推荐系统产品化搭建了起来&#xff0c;也与很多同行AI产品经理小伙伴建立了联系。AI产品经理工作内容各异&#xff0c;不同AI产品化生命周期中更是大为不同&#xff0c;但对想入行AI产品经理的小伙伴来讲&#xff0…

聊一聊生成式AI

生成式AI&#xff08;Generative AI&#xff09;是指一类能够自主创造新内容的人工智能技术&#xff0c;这些内容可以是文本、图像、音频、视频等。与传统的分析性或分类性AI系统不同&#xff0c;生成式模型的主要任务不是对现有数据进行分类或预测&#xff0c;而是生成全新的、…

【C语言 || 排序】希尔排序

文章目录 前言1.希尔排序1.1 直接插入排序1.2 直接插入排序的实现1.2.1 直接插入排序的代码实现 1.3 直接插入排序的时间复杂度1.4 希尔排序1.4.1 希尔排序概念1.4.1 希尔排序的代码实现 前言 1.希尔排序 1.1 直接插入排序 在写希尔排序之前&#xff0c;我们需要先了解直接插入…

电压模式R-2R DAC的工作原理和特性

本文将探讨电压模式R-2R DAC结构。 在本文中&#xff0c;我们将探索什么是R-2R DAC以及如何实现它们。 首先&#xff0c;我们将简要回顾一下开尔文分压器DAC。这种结构很简单&#xff0c;但它们需要大量的电阻和开关来实现高分辨率DAC。这个问题的一个解决方案是称为R-2R DAC…

【python】用代码实现2024中科大强基计划数学科目第一题

题目&#xff1a; 已知正整数a,b,c满足10a11b12c123,&#xff0c;则&#xff08;a,b,c&#xff09;的组数是 思路&#xff1a; 为了找出满足等式 10a 11b 12c 123 的正整数三元组 (a, b, c) 的数量&#xff0c;我们可以使用Python编写一个简单的循环来遍历可能的 a、b 和…

哪种考勤机好用,常见好用的考勤机种类

哪种考勤机好用&#xff0c;常见好用的考勤机种类 用考勤机完成上下班打卡制度&#xff0c;极大地为人事对公司的管理提供了便利。不同种类的考勤机均有各自的长处&#xff0c;那么究竟哪种考勤机比较好用呢&#xff1f;其中&#xff0c;智能云考勤机能够实现异地手机打卡&…

推荐一个Python的前端框架Streamlit

WHY&#xff0c;为什么要用Streamlit 你是不是也想写一个简单的前端界面做些简单的展示和控制&#xff0c;不想写html、css、js&#xff0c;也用不到前后端分离&#xff0c;用不到特别复杂的Flask、Django等&#xff0c;如果你遇到类似这样的问题&#xff0c;我推荐你试试Stre…