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

boyanx2个月前技术教程12

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

先说一下“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,参考我前面的例子。uni-app中的富文本rich-text使用经验  AI小站。如果是python可以使用BeautifulSoup处理,java可以使用Jsoup

相关文章

这13个前端库,帮我在工作中赢得了不少摸鱼时间

前言平时开发的过程中,常常会使用到一些第三方库来提高开发效率,我总结了自己工作这么久以来经常用到的 13 个库,希望对大家有帮助~antd全称应该是Ant Design,这是一个 React 的组件库...

关于编码的那些事 - URL 编码

作者:redmed背景Web 项目中经常会遇到处理 URL 中 Query 的情况,来看下下面问题你有疑惑吗?项目中发现会用到 qs、query-string、URLSearchParams、甚至 q...

手把手教你常用的59个JS类方法

前言前端开发有时会处理一部分后台返回的数据,或者根据数据判断做一些处理; 这个时候就非常有必要将一些常用的工具类封装起来; 本文根据常用的一些工具类封装了 59 个方法,当然还有很多用的较少前期没有录...

H5分享截图方案优化

背景分享是传播活动,吸引用户最重要的一环。现有分享手段多是题目配合单张图片,利用点击的方式跳转到目标页面。在信息越来越丰富的今天,单个题目和图片对用户的吸引力是有限的。而在对推广要求更高的营销场景和裂...

微信分享给好友实现页面跳转

下面微信跳转的方式主要介绍了两种:微信分享给好友和微信扫码跳转。前提:从微信公众号那边获取appid,secret,grantType四个参数备用。1、 绑定域名先登陆公众平台进入“公众号设置”的“功...

前端你得会——加密解密之crypto-js(建议收藏)

场景在开发过程中,我们会经常会从当前系统跳转别的系统进行访问或者页面嵌套使用。那一般都会给到一个地址进行参数拼接,然后去访问。那么会存在一个问题,就是地址暴露在外面参数使用明文的话会被篡改,极度不安全...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。