百度小程序展示富文本编辑器内容rich-text,百度小程序内展示html5代码

功能背景:需要在百度小程序内展示后台富文本编辑器设置文章或其他html代码,使用vue里的v-html与微信小程序内的wxParse不起作用,找了找官方文档发现了< rich-text >组件

代码示例

.swan代码

 <rich-text nodes="{
     
     {content}}"></rich-text>

官方属性名介绍
在这里插入图片描述
直接引用后部分图片出现展示不全情况还需要在.js文件内设置图片宽度

.js代码

content = content.replace(/\<img/gi, '<img style="width:100%;height:auto;"')

进行正则匹配img标签给img标签设置style

猜你喜欢

转载自blog.csdn.net/gjwgjw1111/article/details/131009314