微信小程序笔记功能（富文本editor功能）开发

最新推荐文章于 2025-09-16 15:24:02 发布

原创

最新推荐文章于 2025-09-16 15:24:02 发布 · 1.2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #笔记 #小程序

本文介绍了如何在微信小程序中实现图片上传和插入功能，同时处理了模拟器与PC端的兼容问题，通过区分平台来调整工具栏位置，关键事件editorbindinput用于实时数据获取。

一、效果图展示

模拟器及pc 端效果图手机端就不贴了

在这里插入图片描述

二、把官方示例copy到自己的项目传送门

在这里插入图片描述

三、改一改上传图片功能

  insertImage() {
   
   
    const that = this
    wx.chooseImage({
   
   
    // count:1   一次选择图片的个数
      success: function (response) {
   
   
      // 多张图片上传
        response.tempFilePaths.map(item => {
   
   
          wx.uploadFile({
   
   
            url: '上传图片api',
            name: 'file',
            formData: {
   
   
              systemId: '49603D09F8B64F068F77B7FC965410E0'  // 需要的值
            },
            filePath: item,
            success: res => {
   
   
            // 把图片插入到富文本
              that.editorCtx.insertImage({
   
   
                src: JSON.parse(res.data).data.url,
                data: {
   
   
                  id: 'abcd',
                  role: 'god'
                },
                width: '80%',
                success: function () {
   
   
                  console.log('insert image success')
                }
              })
            },
            fail: err1 => {
   
   
              console.log(err1, '是比啊了');
            }
          })
        })


      },
      fail: err => {
   
   
        console.log(err, '你失败了'