使用微信小程序 富文本编辑器组件 editor

先看下官方文档

https://developers.weixin.qq.com/miniprogram/dev/component/editor.html 富文本组件文档

文档上的代码比较少建议在开发工具中预览代码片段，如下图：

1. 点击添加图片，链接是死的，需要自己做一下图片上传然后将返回的图片插入到富文本编辑器里面 。

代码语言：javascript复制

// 点击图片将图片插入富文本编辑器里面
insertImage() {
    const that = this;
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: function (res) {
        console.log(res.tempFilePaths,'上传图片')
        wx.uploadFile({
          url: '自己的图片上传地址',
          filePath: res.tempFilePaths[0],
          name: 'file',
          formData: {
            app_token: app.data.userInfo.app_token,
          },
          success: function (res) {
            console.log(res.data,'图片上传之后的数据')
            var data = JSON.parse(res.data)
            console.log(data.data.url)
            that.editorCtx.insertImage({
              src: data.data.url,
              success: function () {
                console.log('insert image success')
              }
            })
          }
        }) 
      }
    })
  }

1. 如果低版本基础库的用户较多建议做下兼容。
2. 如果需要编辑富文本之前提交的内容，就需要在富文本初始化的时候加载出上一次提交的数据，拉取数据的代码需要放到。

代码语言：javascript复制

//初始化富文本编辑器方法
onEditorReady() {
    const that = this
    wx.createSelectorQuery().select('#editor').context(function (res) {
      that.editorCtx = res.context
      that.loadData();//这里拉取需要编辑的数据然后初始化到编辑器里面
    }).exec()
  },

拉取数据成功之后调用初始化编辑器内容的api

代码语言：javascript复制

//初始化富文本编辑器方法
that.editorCtx.setContents({
   html: '这里放接口返回的富文本标签数据',
    success: function () {
      console.log('insert html success')
    }
  })

此时就能从详情页点击编辑，然后初始化富文本的内容再次进行编辑跟提交的操作了。

项目效果图如下：

api 官方文档 富文本编辑器 开发工具 图片上传

0 人点赞