去哪里学做网站app,百度免费安装下载,百度竞价排名平台,seo营销方法rich-text是在uni-app一个内置组件#xff0c;用于高性能地渲染富文本内容。先贴一下官方的属性列表#xff1a; 先说一下“selectable” 长按选择区域复制#xff0c;这个我在APP项目中 不起作用#xff0c;可能像文档说的#xff0c;只支持“百度小程序”吧。在APP端起作…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 classcontent-select-copy rich-text :selectabletrue :nodescontent itemclickhandleRichText/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?urlencodeURIComponent(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)
