首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >使用微信小程序 富文本编辑器组件 editor

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

作者头像
hotqin888
发布2019-08-18 13:17:43
7.8K0
发布2019-08-18 13:17:43
举报
文章被收录于专栏:hotqin888的专栏hotqin888的专栏

先看下官方文档

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

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

在这里插入图片描述
在这里插入图片描述
  1. 点击添加图片,链接是死的,需要自己做一下图片上传然后将返回的图片插入到富文本编辑器里面
// 点击图片将图片插入富文本编辑器里面
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. 如果需要编辑富文本之前提交的内容,就需要在富文本初始化的时候加载出上一次提交的数据,拉取数据的代码需要放到
//初始化富文本编辑器方法
onEditorReady() {
    const that = this
    wx.createSelectorQuery().select('#editor').context(function (res) {
      that.editorCtx = res.context
      that.loadData();//这里拉取需要编辑的数据然后初始化到编辑器里面
    }).exec()
  },

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

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

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

项目效果图如下:

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019年05月11日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 先看下官方文档
    • 文档上的代码比较少建议在开发工具中预览代码片段,如下图:
      • 拉取数据成功之后调用初始化编辑器内容的api
      • 此时就能从详情页点击编辑,然后初始化富文本的内容再次进行编辑跟提交的操作了。
  • 项目效果图如下:
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档