#Uniapp: rich-text富文本

不过我建议用数组节点，后端将富文本处理为节点数组返回给前端，这样有两个好处，一是前端处理起来比较方便 ，另外一点就是性能问题，后端处理好之后，前端直接使用数组，性能会更好。不过要将一段HTML富文本处理成节点数组，对后端来说，也是比较麻烦的，如果使用PHP，可使用PHP DOMDocument，参考我前面的例子。然后再说一下事件处理itemclick，我们可以使用这个事件实现对rich-text里面的节点内容进行处理，不过只能处理a和img标签，这个上面官方文档已经说明。处理，java可以使用。

rich-text 组件内屏蔽所有节点的事件。所以如果内容中有链接、图片需要点击，则不能使用rich-text，此时可在uni-app插件市场搜索parse插件使用。app-nvue的rich-text组件支持链接图片点击 name 属性大小写不敏感 img 标签仅支持网络图片 如果在自定义组件中使用 rich-text 组件，那么仅自定义组件的 css 样式对 rich-text 中的 class 生效。 nodes 属性推荐使用 Array 类型，由于组件会将 String 类型转换为 Array

而我，就在最近一个项目中，被它“折磨”得不轻，但最终，也跟它成了“生死之交”。后端大哥拍着胸脯说：“放心，内容都是富文本，我直接从 CMS（内容管理系统）里把 HTML 字符串给你，你只管展示就行！我直接找到后端大哥，对他说：“哥们，别给我 HTML 了，这玩意儿在客户端是‘烫手山芋’。下面，我用两个真实场景，带你看看我是如何实践这个“真理”的。病急乱投医，我开始疯狂搜索，很快就找到了一个“貌似可行”的方案：找一个第三方的。就在我快要放弃，准备跟产品经理“真人 PK”的时候，我决定静下心来，把。

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

1、rich-text有很大弊端（不支持富文本内点击事件），若富文本里有可点击事件，则不推荐使用2、v-html在小程序中不支持。若项目不包含小程序，则推荐使用v-html。（记得使用v3编译器,2.7.5版本+的HBuildX已默认使用v3编译，无需自定义设置）3、uparse全端支持，但不支持nvue。若项目包含app,小程序，则推荐使用uparse。然后在nvue页面另行使用rich-text即可。

富文本的相关代码：富文本只显示文字，其余html不显示；富文本mp-html

uniapp展示富文本闲言安装 mp-html 闲言 以前vue展示HTML时候使用v-html就可以了，但是在 uniapp 中，部分可以展示，比如支付宝中就不行，在 uniapp中使用的是 “<rich-text>”，但是效果并不是很理想，有时候也不是很好。 <template> <view class="content"> <rich-text :nodes="content"></rich-text> </view>

官网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-..

通过正则给需要渲染的数据添加类名 .replace(/\<img/gi, '<img class="content-img"') 然后通过类名添加样式但是不要添加scoped <style lang="less"> .content-img { width: 100%; } </style>

<rich-text :nodes="后台给的富文本写这里就好"></rich-text>

使用 rich-text 组件渲染html格式的代码，常常因为不能自定义css导致文本不能缩进，以及图片不能居中等问题，这里可以考虑使用js的replace方法，替换字符串，然后在渲染的同时加载行内样式。replace里的g表示全局替换，而每个关键词前面的\则为转义字符，在针对html类的标签替换的时候，是必不可少的。这个方法还支持拓展关键词增加如果有需求可以自行添加，需要自定义的css样式则可以在所替换的字符串关键词里定义。

（1）全局配置filter方法，实现富文本内容截取转换，附上‘rich-txt-p’样式类。（2）在app.vue中编辑‘rich-txt-p’内容，即富文本需要自定义的样式。解决方案：将传入的富文本内容截取并添加自定义样式类名。注：需要用 ::v-deep 深度绑定。rich-text 富文本组件在。

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

本次遇到的uni-app框架写的rich-text内容在小程序页面可以正常显示，而安卓机无法正常显示的原因，就在于img标签中属性的书写，建议统一将图片的宽高设置都写到img标签中的style属性中，这样小程序和安卓都可以正常显示，否则就可能还会复现本篇博客中出现的问题。