微信小程序富文本編輯器editor初體驗-圖片上傳

https://developers.weixin.qq.com/miniprogram/dev/component/editor.html

以前沒有小程序富文本編輯器，只能輸入文字，圖片上傳後，在服務端進行拼接。現在好啦，直接上富文本，向裏面傳圖片，修改圖片大小。

主要是富文本里插入圖片，選擇圖片，一個臨時地址，預覽地址，上傳服務器後返回的圖片地址。

在微信小程序基礎庫2.7以前（目前最新爲2.7.1）是沒有富文本編輯器的，只能通過textarea和圖片選擇器，將文本和圖片在服務端進行組裝。目前網絡上也幾乎沒有一個完整的例子出來（因爲今年5月份剛推出來）。

有了富文本編輯器，就可以愉快地發佈圖文了。 瞧它功能還是挺豐富，加粗，斜體，下劃線，左中右對齊……背景色，標題，插入當前日期，事項，列表，

當然，  最主要還是圖片上傳（理論上是不是沒有6幅圖9幅圖的數量限制啦？），點擊圖片，還可以刪除，整個編輯區的刪除請使用哪個回收站（垃圾桶）的圖標……  當然，它傳到服務端的帶標籤的html，解析還是依靠wxparse 珠三角設代小程序plus版已經整合完畢。

相比之前的文本+圖片組裝模式，這裏可以給每個圖片進行說明了。甚至給每個圖片下方添加圖片名稱。當然，手機上操作這些稍嫌麻煩，用語音輸入文字，速度就快很多了。

js: 

  insertImage() {
    const that = this
    wx.chooseImage({
      count: 6,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: res => {
        const images = that.data.images.concat(res.tempFilePaths)
        console.log(res.tempFilePaths)
        that.data.images = images.length <= 6 ? images : images.slice(0, 6)
        $digest(that)
        const arr = []
        // console.log(that.data.images)
        for (let path of that.data.images) {
          arr.push(wxUploadFile({
            // url: config.urls.question + '/image/upload',
            url: config.url + '/wx/uploadwxeditorimg',
            filePath: path,
            name: 'file',
          }))
        }
        // console.log(arr)
        Promise.all(arr).then(res => {
          return res.map(item => JSON.parse(item.data).link)
        }).catch(err => {
          console.log(">>>> upload images error:", err)
        }).then(urls => {
          // console.log(urls)
          for (let i = 0; i < urls.length; ++i) {
            that.editorCtx.insertImage({
              src: config.attachmenturl + urls[i],
              // data: {
              //   id: 'abcd',
              //   role: 'god'
              // },
              success: function () {
                console.log('insert image success')
                that.setData({
                  images: []//這裏清0，否則總是將上次的圖片帶上
                })
                // console.log(that.data.images)
              }
            })
          }
        })
      }
    })
  },

  handleContentInput(e) {
    const value = e.detail.html
    //要將圖片的頭http://*.*.*.去掉/at/g
    var reg = new RegExp(config.attachmenturl, "g")
    this.data.content = value.replace(reg, '');
  },

  submitForm(e) {
    var that = this
    const title = this.data.title
    const content = this.data.content
    if (title && content) {
      // 登錄
      var sessionId = wx.getStorageSync('sessionId')
      //發起網絡請求
      wx.request({
        url: config.url + '/wx/addwxeditorarticle',
        header: {
          "Content-Type": "application/x-www-form-urlencoded"
        },
        method: "POST",
        data: {
          hotqinsessionid: sessionId,
          title: title,
          content: content
        },
        success: function (res) {
          if (res.data.status == 0) {
            wx.showToast({
              title: res.data.info,
              icon: 'loading',
              duration: 1500
            })
          } else {
            wx.showToast({
              title: res.data.info, //這裏打印出成功
              icon: 'success',
              duration: 1000
            })
            //進行清理
            that.editorCtx.clear({
              success: (res) => {
                console.log('succ:' + res)
              },
              fail: (res) => {
                console.log('fail:' + res)
              }
            })
            wx.navigateTo({
              url: `../detail/detail?id=` + res.data.id
            })
          }
        }
      })
    } else {
      wx.showToast({
        title: "標題或正文不能爲空！",
        icon: 'loading',
        duration: 1500
      })
    }
  },