微信小程序 富文本 rich-text && editor

富文本 rich-text

用于渲染 html 内容

wxml:

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

js:

data: {
   essayContent: "<p>沙尘暴来临时，人们开始追索源头，通过卫星遥感发现，此次随气流空运而来的沙子并不是国产货，沙源地位于蒙古国南部的戈壁沙漠。随着气温显著回暖，沙源地提前解冻，而同时期降水又偏少，植被长不出来，导致地表沙土裸露。</p><p><img src=\"https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/02/05/ChMkJlbKyYCIVFVFABBPrl_EfbkAALIOwD7jb0AEE_G253.jpg\"></p><p><br></p><p>随着冷锋经过沙源地，近地面大风携带大量颗粒物向东南方向推进，造成的沙尘天气波及到我国北方大部分地区。</p><p>&nbsp;</p><p>最近频繁的沙尘暴揭开了蒙古国环境恶化的面纱：近几十年来，因气候变迁和人为破坏导致了大面积荒漠化、水土流失、空气污染等问题。</p><p><br></p><p>中央气象台已经发布沙尘暴黄色预警，受一股全能型冷空气的影响，从昨晚到今天，沙尘天气基本覆盖北方大部地区，西北、华北、东北地区中西部、黄淮等地将先后出现沙尘。</p>",
},

适配页面 发现图片会超出屏幕，处理图片自适应，给 <img/>标签添加属性 控制

parseRich:function(content) {
  const singalList = [
    ['"', '"'],
    ['&', '&'],
    ['&lt;', '<'],
    ['&gt;', '>'],
    ['&nbsp;', ' ']
  ];
  const tagList = ['p', 'span', 'img', 'a', 'div', 'h1', 'h2', 'h3', 'h4', 'h5', 'font', 'b', 'i', 'u', 'code', 'table', 'tr', 'td', 'th']
  singalList.forEach(i => {
    content = content.replace(new RegExp(i[0], 'g'), i[1])
  })
  tagList.forEach(i => {
    content = content.replace(new RegExp(`<${i} `, 'gi'), `<${i} class="rich_${i}" `)
  })
  return content;
}

在对应页面中 wxss 中设置图片属性：

.rich_img{
  max-width: 100% !important;
  height: auto;
}

调用方法对数据处理：

    that.setData({
          essayContent: uitl.parseRich(data.description),
         })

富文本编辑器 editor

editor - 相关API
editor 是 微信官方提供的一款 微信小程序富文本编辑器，可以对图片、文字进行编辑，目前不支持插入视频。编辑器导出的内容支持 html 和 纯文本。

官方示例样式，需要下载示例代码进行导入。
示例代码：https://developers.weixin.qq.com/s/W7uZ3EmU7jbl

1679540799107.jpg

为 editor 设置内容

 if(htmlCont){
          wx.createSelectorQuery().in(that).select('#editor').context(function (res) {
            that.editorCtx = res.context;
            that.editorCtx.setContents({
              html: htmlCont
            })
          }).exec()
          
        }

这里必须获取that.editorCtx 对象，在onEditorReady()初始化后，直接调用设置内容 有时回显有时不回显。

获取 editor 编辑的内容

 that.editorCtx.getContents({

      success(res) {
        // console.log('complete====', res)
        let html =  res.html;
        let text = res.text;
      }
    })

插入图片，这里插入的是url, 需要上传图片后设置 图片路径即可

insertImage() {
    const that = this;

    wx.chooseMedia({
      count: 1,
      mediaType: ['image'],
      sourceType: ['album', 'camera'],
      camera: 'back',
      success(res) {
        let img = res.tempFiles[0].tempFilePath;
  
        // 上传图片 获取图片路径 webRequest.uploadFile()自定义的图片上传方法
        webRequest.uploadFile(img).then(res => {
          if(res.code == 200){
            let imgUrl =  res.data.url;
            // 获取图片路径后 插入图片
            that.editorCtx.insertImage({
              src:imgUrl,
              success: function () {
                console.log('insert image success')
              }
            })
          }else{
            wx.showToast({
              title: '图片插入失败，请重新操作',
              icon:'none'
            })
          }
        })
      }
    })
  }

微信小程序富文本相关使用，针对自己在开发过程中遇到的问题进行记录，如有更好的建议或其他看法，请指出，共同进步。感谢。

最后最后 还是送自己一句话：过日子过的是以后，不是从前。