【uni-app】rich-text的使用

这篇具有很好参考价值的文章主要介绍了【uni-app】rich-text的使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

rich-text的使用

rict-text可以支持部分HTML节点及属性
rict-text的属性如下:
uniapp rich-text,uniapp 开发实践整理,uni-app,微信小程序,前端,小程序
nodes 值为 HTML String 时,在组件内部将自动解析为节点列表,推荐直接使用 Array 类型避免内部转换导致的性能下降。App-nvue 和支付宝小程序不支持 HTML String 方式,仅支持直接使用节点列表即 Array 类型,如要使用 HTML String,则需自己将 HTML String 转化为 nodes 数组,可使用 html-parser (opens new window)转换。

例如:

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


htmlSnip: [{
        name: 'div',
        attrs: {
            class: 'div-class',
            style: 'line-height: 60px; color: red; text-align:center;'
        },
        children: [{
            type: 'text',
            text: 'Hello&nbsp;uni-app!'
        }]
    }],

有时候展现的图片也是没有样式的,导致图片会按照原始大小显示,超出界面框架。我们需要用正则将内容转义一下:
新建一个js文件 replaceImg.js:

/**
 * 处理富文本里的图片宽度自适应
 * 1.去掉img标签里的style、width、height属性
 * 2.img标签添加style属性:max-width:100%;height:auto
 * 3.修改所有style里的width属性为max-width:100%
 * 4.去掉<br/>标签
 * @param html
 * @returns {void|string|*}
 */
function formatRichText(html){
  let newContent= html.replace(/<img[^>]*>/gi,function(match,capture){
      match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
      match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
      match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
      return match;
  });
  newContent = newContent.replace(/style="[^"]+"/gi,function(match,capture){
      match = match.replace(/width:[^;]+;/gi, 'width:100%;').replace(/width:[^;]+;/gi, 'width:100%;');
      return match;
  });
  newContent = newContent.replace(/<br[^>]*\/>/gi, '');
  newContent = newContent.replace(/\<img/gi, '<img style="width:100%;height:auto;display:block;margin:10px 0;"');
  return newContent;
}

// module.exports = {
//   formatRichText
// }

module.exports = {
  formatRichText: formatRichText
}

在对应的界面调用:文章来源地址https://www.toymoban.com/news/detail-538326.html

var replace_img = require("../../../utils/replaceImg.js");

//request
let data_article = res.data.data[0];//这里是请求到的 html 内容
var newsArticle = replace_img.formatRichText(data_article.content);
that.setData({
  art_content:newsArticle
});

到了这里,关于【uni-app】rich-text的使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序使用rich-text解析富文本字符串的时候,遇到image标签图片很大超过屏幕

    场景 : 使用uniapp开发微信小程序,解析富文本文章需求 用到的组件: u-view2.0的u-parse  uniapp提供的rich-text 以上两种组件都是解析富文本的作用,一般用于富文本解析场景,比如解析文章内容,商品详情,带原生HTML标签的各类字符串等,此组件和uni-app官方的 rich-text 组件功能

    2024年02月13日
    浏览(66)
  • 微信小程序富文本拓展rich-text

    支持解析 style 标签中的全局样式 支持自定义默认的标签样式 支持自动设置标题 若 html 中存在 title 标签,将自动把 title 标签的内容设置到页面的标题上,并在回调 bindparse 中返回,可以用于转发 支持添加加载提示 可以在 Parser 标签内添加加载提示或动画,将在未加载完成或

    2024年02月03日
    浏览(43)
  • 微信小程序中rich-text富文本的用法

    首先:用普通的方法直接传递是会出错的。item是从接口中拿过来的富文本 控制台会提示渲染错误 解决办法:用encodeURIComponent转码 当然,在接收的地方还要处理一下 现在用rich-text标签直接渲染goodDetails 就显示正常了 因为一般接口给出来的图片都是像这样的,需要我们去添加

    2024年02月14日
    浏览(47)
  • 微信小程序常用组件的简单使用 view,scroll-view,swiper,swiper-item,text,rich-text,button,image

    view组件就类似于html中的div标签 list.wxml list.wxss scroll-view组件就是滚动的视窗,使用scroll-view组件时,要想横向滚动或者纵向滚动时,需要在scroll-view组件上添加对应的属性 scroll-x 或 scroll-y,然后需要注意的是,纵向滚动需要给scroll-view组件限定高度,横向滚动则需要给scroll-vi

    2024年02月15日
    浏览(158)
  • 微信小程序 rich-text 超过 2 行显示省略号

    rich-text(富文本),如果想实现文本超过两行变成省略号,常规的 div 可以实现,但因为是在微信小程序中,同时使用的是 rich-text 返回的是富文本,所以不能简单的使用以下代码实现: 因为富文本使用的 rich-text 回显的,想着直接对这个标签写上这个 CSS,发现也无法达到想

    2024年02月03日
    浏览(40)
  • 【微信小程序入门到精通】— 这篇看完直接拿下 text 和 rich-text 组件!

    对于目前形式,微信小程序是一个热门,那么我们该如何去学习并且掌握之后去做实际项目呢? 为此我特意开设此专栏,在我学习的同时也将其分享给大家! 如果在往下阅读的过程中,有什么错误的地方,期待大家的指点! 1. text 是一种文本组件 2. text类似于HTML中span标签,

    2024年02月10日
    浏览(61)
  • 微信小程序 rich-text富文本框 怎么设置里面节点的样式

    1、 在JS中我们获取数据,在没有类名的情况下 使用正则匹配你想要添加演示的节点  res[1].data[0].f_content为rich-text里面的节点 如图  代码:让获取的节点中的图片的最大宽度为100%,高度为auto 初始状态:图片超过div            效果:  

    2024年02月16日
    浏览(47)
  • 【微信小程序】富文本rich-text的图片预览效果的几种方法

    使用原生小程序开发,实现在富文本rich-text中的图片预览效果的几种方法对比。 update:因为方案3wxparser后续没有再维护,解析微信公众号文章时会出现排版错误的问题。作为插件也很难二次开发。换成 mp-html 了 一个不需要用额外组件或插件的方法: 思路 :使用正则把图片的

    2023年04月08日
    浏览(55)
  • 微信小程序富文本解析 rich-text 、wxParse、mp-html

    rich-text 微信自带标签 很多局限性 还有后台的富文本 font 标签 size 不生效。字体大小无法设置 wxParse 微信很早的那期 副本插件 封装。拥有7.7k stars已停止维护了的库 缺点 1、在解析富文本过程中,多次调用小程序的setData()方法,对性能有一定影响 2、可以解析audio,但是不能保

    2024年02月15日
    浏览(57)
  • 关于微信小程序、字节小程序rich-text中图片宽度超出范围解决办法

    微信小程序和字节小程序中的rich-text可以将后台富文本显示在前端,但是当图片过宽时微信小程序中就会超出显示范围,而字节小程序中却不会。(微信开发者是不是该优化下这个控件了 ) 微信小程序中    字节小程序中    那就解决微信小程序中的显示问题就可以了,可

    2024年02月11日
    浏览(56)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包