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

最新推荐文章于 2025-05-15 15:28:41 发布

walk walk

最新推荐文章于 2025-05-15 15:28:41 发布

阅读量2.7k

点赞数 5

CC 4.0 BY-SA版权

文章标签： uni-app rich-text 富文本

本文链接：https://blog.csdn.net/dongtest/article/details/139802377

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标签，这个上面官方文档已经说明。

使用示例：

比如要对富文本内容中的所有链接跳

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

walk walk

关注关注

5
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

uni-app - 完美解决 rich-text 富文本解析图片无法自适应宽高问题，图片超出屏幕宽度且不受控（详细示例源码，简单快速无需任何第三方插件）

王二红

07-15

7511

uniapprich-text解析图片变形了怎么办，uniapp富文本解析时img图片渲染超出边界的问题，uniapp渲染富文本图片宽高问题，uniapp使用rich-text加载富文本时,对于富文本中图片的大小处理，vue通过v-html指令渲染的富文本无法修改样式的解决方案，解析富文本图片溢出,超出的问题。uni-apprich-text富文本图片变形了，解决uni-app中富文本rich-text回显图片不自适应展示问题，uniapp富文本rich-text图片适配，Uni-APP

uni-app 小程序解决rich-text富文本样式设置不成功问题

xkqbaiyuan的博客

11-01

6034

富文本样式 uni-app rich-app（富文本）组件介绍请求到的富文本文件内容 "<p><span >编者按：本文来自微信公众号“</span><a href=\"https://mp.weixin.qq.com/s/zcN6wTnZm3ann6tNicjyrQ\" target=\"_blank\" >略大参考</a>&lt...

参与评论您还未登录，请先登录后发表或查看评论

uni-app 中如何解析html标签用rich-text

weixin_68237499的博客

08-17

1592

uni-app 中如何解析html标签用rich-text

关于uni-app富文本图片溢出以及富文本显示问题

最新发布

skkkkkrt的博客

05-15

793

/ 分析 dom 上是否带有 style=""// 批量替换的样式 [ 根据项目需求自行设置 ]首先新建replaceimg.js 内容如下。// strong 样式。// code 样式。

uniapp 电商app 富文本框的使用——添加图文功能

yehaocheng520的博客

11-21

1万+

uniapp 富文本框的使用 uniapp中是有富文本框组件的。 uniapp中的富文本框组件的使用官网链接：https://uniapp.dcloud.io/component/editor?id=editor 官网富文本框的展示部分：（下面红框框住的菜单含义如下：） B 加粗 I 斜体 U 下划线居中靠右字体撤回反撤回添加横线图片结构部分： <editor id="editor" class="ql-container" :placeholder="placehold

鸿蒙OS&UniApp开发富文本编辑器组件#三方框架 #Uniapp

小淼淼的博客

05-14

994

平台差异是最大挑战，需要利用条件编译提供各平台最佳实现功能要适中，不是所有Web富文本功能都适合移动端性能优化很重要，尤其是在低端设备上良好的用户体验需要细节打磨，如适当的反馈、容错处理等富文本编辑是一个复杂的课题，即使是成熟的Web编辑器也有各种问题。在移动端和小程序环境中，受限更多。我们的方案虽然不完美，但通过合理的取舍和平台适配，已经能满足大部分应用场景的需求。后续还可以继续完善这个组件，比如添加表格支持、代码高亮、Markdown转换等高级功能。

uniapp自定义富文本编辑器+内容渲染回显功能(多端可用)

m0_58665272的博客

05-29

5003

uniapp富文本编辑功能，一套代码多端可用

【uni-app】rich-text的使用

loyd3的博客

11-15

7250

App-nvue 和支付宝小程序不支持 HTML String 方式，仅支持直接使用节点列表即 Array 类型，如要使用 HTML String，则需自己将 HTML String 转化为 nodes 数组，可使用 html-parser (opens new window)转换。有时候展现的图片也是没有样式的，导致图片会按照原始大小显示，超出界面框架。nodes 值为 HTML String 时，在组件内部将自动解析为节点列表，rict-text可以支持部分HTML节点及属性。

uniapp 中 editor的使用

weixin_49133874的博客

11-18

4650

有复用需求所以做成了组件 ** editor.vue ** <template> <view class="container"> <view class="page-body"> <view class='wrapper'> <view class='toolbar' @tap="format"> <view :class="formats.bold ? 'ql-active' : ''" class="ic

uniapp - editor 富文本的使用

每天都要努力学习哦~~

01-27

5020

标签增加属性 data-local，delta 格式内容中图片 attributes 属性增加 data-local 字段，该值为传入的临时文件地址。富文本组件内部引入了一些基本的样式使得内容可以正确的展示，开发时可以进行覆盖。需要注意的是，在其它组件或环境中使用富文本组件导出的html时，需要额外引入。从技术本质来讲，这个组件仍然运行在视图层webview中，利用的也是浏览器的。第二参数是方法的回调函数，参数是指定的相关节点信息。（初始时，选择器仅选取页面范围的节点，不会选取任何自定义组件中的节点）。

uniapp显示富文本

qq_34631220的博客

10-20

5115

<template> <view> <view class="dade-image"> <image src="https://i02piccdn.sogoucdn.com/812e96986d0d60b7"></image> </view> <view class="dade-ti"> <view class="dade-padding">虫草面膜亮晶晶</view> .

uni-app、微信小程序 富文本内容利用html2json转换成对应类似控件 rich-text 对应的数组资源格式！

06-10

4. **在rich-text组件中使用转换后的数据**：最后，将`richTextNodes`传递给uni-app或微信小程序的rich-text组件的`nodes`属性。 ```html <rich-text :nodes="richTextNodes"></rich-text> ``` 通过以上步骤，...

uniapp适用移动端的富文本组件

08-10

uni-app 适用移动端的富文本组件

uni-app 自定义组件展示html富文本内容，可实现富文本html内容中图片展示、视频播放、音频播放。

06-10

通过阅读和理解这些代码，我们可以学习到如何在uni-app中构建一个完整的富文本展示系统。总结，uni-app自定义组件配合html2json转换，能够有效地处理和展示HTML富文本内容，包括图片、视频和音频的播放。通过深入...

【uniapp】富文本

Qxn530的博客

10-26

1537

#Uniapp: rich-text富文本

...

01-25

1467

支持默认事件，包括：click、touchstart、touchmove、touchcancel、touchend、longpress。

uniapp-app使用富文本编辑器editor

m0_65720832的博客

01-27

6005

注意：editor不能封装为组件，否则报错（在其他文章看的）文档上写的也不是特别详细，还以为得npm，但没npm也能用。

uniapp富文本内容展示处理

每一篇博客都是对自己技术的沉淀

07-19

978

'") // 设置富文本所有图片宽度。} from "@/api/api.js" // 后端接口。content: '', // 富文本内容。

uniapp 富文本rich-text的使用

热门推荐

漫天随飞雪的博客

12-18

1万+

官网api:https://uniapp.dcloud.io/component/rich-text 如果需要支持 HTML String，则需要自己将 HTML String转化为 nodes 数组，可使用html-parser转换。参考：推荐使用HBuilderX，新建uni-app项目，选择内置uni-app模板 <template> <view> <view class="banner"> <image class="banner-..

uniapp rich-text

02-14

### UniApp `rich-text` 组件使用教程 #### 一、基础介绍 `rich-text` 是用于展示富文本内容的组件，在不同平台上的表现可能会有所差异。此组件支持 HTML 片段作为输入并将其渲染成相应的视图结构。 #### 二、属性说明 - **nodes**: 接收要渲染的内容字符串或对象数组，可以是纯文本也可以包含标签。 - **space**: 设置节点间的间距，默认值为'normal'；可选参数有 'ems', 表示按照 em 单位来设置间距大小[^1]。 #### 三、样式应用技巧对于某些特定场景下遇到的样式问题，比如内联样式的失效情况，可以通过全局配置过滤器的方式给指定标签添加额外 CSS 类名来进行样式覆盖： ```javascript export function richTxtFilter(content) { if (!content) return ''; let val; // 替换 p 标签为其加上自定义类名 "rich-txt-p" val = content.replace(/<p/gi, '<p class="rich-txt-p"'); return val; } ``` 上述代码片段展示了如何通过正则表达式替换原有 `<p>` 开始标记，从而达到为目标元素附加新类的效果[^3]。 #### 四、跨平台兼容性注意事项由于各平台对原生能力的支持程度不尽相同，因此在开发过程中需要注意测试各个目标环境下的行为一致性。例如，在百度小程序中可能出现无法正确解析HTML的情况，此时建议检查是否有特殊字符未被转义等问题存在[^4]。 #### 五、多媒体资源加载失败处理当发现图片或其他媒体文件未能成功显示时，应确认这些外部链接是否能够正常访问以及路径是否正确无误。另外还需注意部分框架版本可能存在已知缺陷影响到此类功能正常使用，及时更新至最新稳定版往往能解决问题所在[^2]。