专栏首页hotqin888的专栏微信小程序富文本编辑器editor初体验-图片上传

微信小程序富文本编辑器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
      })
    }
  },

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 小程序的页面生成图片分享朋友圈

    1.网络图片要下载到本地,就是getimginfo和promise,具体技术细节我也不晓得。然后就是本地图片的地址和网络图片的地址不同。本地的要加../../i...

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

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

    hotqin888
  • 小程序利用富文本编辑器editor编辑文章

    https://blog.csdn.net/qq_29789057/article/details/90108048

    hotqin888
  • 投融资汇总|本周(12.2-12.8),谷歌罕见的在日本出手

    本周硬科技领域投融资事件一共45起,人工智能领域发生21起融资事件,占比46%;生物医药领域发生8起融资事件,占比18%;物联网领域发生6起融资事件和1起收购事...

    镁客网
  • c#计算2个字符串的相似度

    冰封一夏
  • 微信小程序“实时日志”帮你快速找到bug

    为帮助小程序开发者快捷地排查小程序漏洞、定位问题,微信官方推出了实时日志功能。从基础库2.7.1开始,开发者可通过提供的接口打印日志,日志汇聚并实时上报到小程序...

    极乐君
  • 18.7.11日报

    1,修复https://passport.liepin.com/e/account#sfrom=click-pc_homepage-front_navigati...

    龙泉寺扫地僧
  • 特别教程-CronTrigger教程

    cron表达式是一个已经存在了很长时间的UNIX工具,因此它的调度功能非常强大且已经经过验证。CronTrigger类的功能是基于cron的调度功能实现的。

    Throwable
  • 【我爱设计模式】备忘录 - Ajax响应缓存

    备忘录模式,是我最喜欢使用的几个设计模式之一,实用性很强,我已经多次运用在项目中。

    神仙朱
  • 均衡存在的二重性:不可分割均衡与收入效应(CS GT)

    本文表明,对于不可分割的商品,竞争均衡的存在从根本上取决于代理商的替代效应,而不是收入效应。均衡的双重性允许竞争均衡存在下的结果从具有可转让效用的环境转移到具有...

    用户7454091

扫码关注云+社区

领取腾讯云代金券