小程序的rich-text组件使用:

效果图
效果图
接口获取的数据
接口返回
数据转义后
通过转义

wxml结构

<view class='content'>
  <view class='in'>
    <view class='com'>
      <rich-text nodes="{{myrich}}"></rich-text>
    </view>
  </view>
</view>

js结构

const app = getApp();

Page({

  /**
   * 页面的初始数据
   */
  data: {
    myrich: "", //文本内容
  },


  //转义方法
  escape2Html(str) {
    var arrEntities = { 'lt': '<', 'gt': '>', 'nbsp': ' ', 'amp': '&', 'quot': '"' };
    return str.replace(/&(lt|gt|nbsp|amp|quot);/ig, function (all, t) { return arrEntities[t]; }).replace('<section', '<div').replace('<img', '<img style="max-width:100%;height:auto" ');
  },

  
  //获取内容
  getMyText(e) {
    let that = this,
      post = {};
    post.api = "myTextApi";
    common.ajax(post, function (res) {
      if (res.data.code == 0) {
        const myrich = that.escape2Html(res.data.params.content);
        that.setData({
          myrich: myrich
        })
      }
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getMyText();
  },
Logo

北京人形旗下天工造物具身智能开源社区,聚焦具身天工与慧思开物两大平台

更多推荐