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

1.效果图

2.提交打印

3.上代码
文件目录

assets文件

链接: https://pan.baidu.com/s/1CVyQgbQAVIUR6ZcSktcVLg 提取码: 5ush 复制这段内容后打开百度网盘手机App，操作更方便哦

4.i标签要去找哦，目前只写了一部分

<view class="toolbar" catchtouchend="format">
	<i class="iconfont icon-charutupian" catchtouchend="insertImage"></i>
	<i class="iconfont icon-format-header-2 {{formats.header === 2 ? 'ql-active' : ''}}" data-name="header"
		data-value="{{2}}"></i>
	<i class="iconfont icon-format-header-3 {{formats.header === 3 ? 'ql-active' : ''}}" data-name="header"
		data-value="{{3}}"></i>
	<i class="iconfont icon-zitijiacu {{formats.bold ? 'ql-active' : ''}}" data-name="bold"></i>
	<i class="iconfont icon-zitixieti {{formats.italic ? 'ql-active' : ''}}" data-name="italic"></i>
	<i class="iconfont icon-zitixiahuaxian {{formats.underline ? 'ql-active' : ''}}" data-name="underline"></i>
	<i class="iconfont icon--checklist" data-name="list" data-value="check"></i>
	<i class="iconfont icon-youxupailie {{formats.list === 'ordered' ? 'ql-active' : ''}}" data-name="list"
		data-value="ordered"></i>
	<i class="iconfont icon-wuxupailie {{formats.list === 'bullet' ? 'ql-active' : ''}}" data-name="list"
		data-value="bullet"></i>
</view>
<view class="contaner" >
	<editor id="editor" class="ql-container" value='{{dataArry}}' placeholder="{{placeholder}}"
		bindstatuschange="onStatusChange" bindblur='goplay' bindready="onEditorReady">
	</editor>
</view>

<view bindtap="sublimt" class="submit">
	提交
</view>

Page({
  data: {
    formats: {},
    readOnly: false,
    placeholder: '开始输入...',
    dataArry: "<p>dadsa</p><p>dsad</p><img src='https://sucai.suoluomei.cn/sucai_zs/images/2020/11/03/2739b646610de30a4b60ad705b1df64c.jpg'><img src='https://sucai.suoluomei.cn/sucai_zs/images/2020/11/03/2739b646610de30a4b60ad705b1df64c.jpg'><img src='https://sucai.suoluomei.cn/sucai_zs/images/2020/11/03/2739b646610de30a4b60ad705b1df64c.jpg'>"
  },
  readOnlyChange() {
    this.setData({
      readOnly: !that.data.readOnly
    })
  },
  onLoad() {
    const that = this
    wx.createSelectorQuery().select('#editor').context(function (res) {
      that.editorCtx = res.context;
      that.editorCtx.setContents({
        html: that.data.dataArry,
        success: function () {}
      })
    }).exec();
  },

  onEditorReady() {
    const that = this
    wx.createSelectorQuery().select('#editor').context(function (res) {
      that.editorCtx = res.context
    }).exec()
  },
  blur() {
    this.editorCtx.blur()
  },
  format(e) {
    let {
      name,
      value
    } = e.target.dataset
    if (!name) return
    this.editorCtx.format(name, value)

  },
  insertImage() {
    const that = this
    wx.chooseImage({
      count: 9,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: function (res) {
        that.getpublish(res.tempFilePaths, 0)
      }
    })
  },
  // 递归循环下载图片
  getpublish(list, i) {
    wx.showLoading({
      title: '正在上传第' + (i + 1) + '张',
    })
    var that = this
    wx.uploadFile({
      url: "https://api110.herbplantist.com/sucai/public/index.php/post/post/uploadFile",
      filePath: list[i],
      name: 'file',
      formData: {
        key: 'Gn1xVdBiTClSSHKZifg0pTQSU5XGagWO',
        is_https: 1,
      },
      success(res) {
        var data = JSON.parse(res.data)
        console.log(data)
        if (data.status == 200) {
          that.editorCtx.insertImage({
            src: data.info.url,
            success: function () {}
          })
        }
        if (i + 1 == list.length) {
          wx.showToast({
            title: '上传成功',
          });
        }
        wx.hideLoading()
        if (++i < list.length) {
          that.getpublish(list, i);
        }
      },
    })
  },
  goplay(e) {
    this.setData({
      dataArry: e.detail.html
    })
  },
  sublimt() {
    let that = this
    wx.showModal({
      title: '温馨提示',
      content: '确定提交？',
      success(res) {
        if (res.confirm) {
          wx.showToast({
            title: '提交成功，打开调试看打印',
          })
          console.log(that.data.dataArry)
        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      }
    })
  }
})

@import "./assets/iconfont.wxss";

.toolbar {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  background: #fff;
  border-bottom: 1rpx solid #ccc;
  padding: 20rpx;
  box-sizing: border-box;
  position: sticky;
  top: 0;
  z-index: 99;
}
.ql-active {
  color: #22C704;
}

.iconfont {
  display: flex;
  align-items: center;
  text-align: center;
  width:30px;
  height: 30rpx;
}

.contaner {
  width: 100%;
}
.ql-container {
  box-sizing: border-box;
  width: 100%;
  height:auto;
  font-size: 16px;
  line-height: 1.5;
  overflow: auto;
  padding: 10px 10px 20px 10px;
  border: 1px solid #ECECEC;
}
.submit {
  width: 100rpx;
  height: 100rpx;
  line-height: 100rpx;
  color: #fff;
  background-color: red;
  position: fixed;
  bottom: 74rpx;
  right: 35rpx;
  text-align: center;
  border-radius: 50%;
}