小程序 云开发editor

基于云开发.jpg

首先了解下小程序自带editor支持情况:

1. 没有删除对应的Api

2. 真机不支持wxfile://(临时路径)

3. 不支持图片云ID

4. 云存储不支持移动文件方法

以上都是围绕editor图片冗余处理 发现的问题，其中问题3 不支持图片云ID官方已知晓也在开发中，希望尽快出来！

方案: 云开发editor图片上传思路

1.选择图片后即上传图片(依然是上传图片到temp目录)

2.用户上传同时记录下 [本地图片临时路径,已替换云图下载路径]

3.在返回的html找出当前图片云路径并封装成数组(云图下载地址数组)

4.[本地图片临时路径,已替换云图下载路径]->[云图下载路径] 对应 图片临时地址

5.在用[本地图片临时路径]上传 你要上传的路径

此方法只能解决云开发也可以使用小程序富文本editor,

优点: 1 用户在编辑器里对图片操作(随意)
反正上传图片在 temp文件目录，一键批量

缺点：1.上传图片要执行两次，编辑时上传，提交时上传！
2. 也不能解决图片冗余占用空间问题（主要体现在二次编辑）

editor 我封装组件，方便以后其他页面使用，代码贴实现功能部分！

1 解决不支持图片云id

其实也就是把图片File ID 替换成下载路径

 let regsrc = cloudimg[0],
           imgReg  = new RegExp('cloud://kc-xxx.222-kc-0da123-12543'),      
           imgsrc = regsrc.replace(imgReg, ' https://222-kc-0da123-12543.tcb.qcloud.la');

        that.editorCtx.insertImage({
            src: imgsrc,             //替换后图片下载地址即可显示
            success: function () {
                //这里可以返回 
               // [本地图片临时路径,已替换云图下载路径]
             }
          })

2用户提交后，找出html中 标签并封装成数组

此时返回的图片数组里面全部是下载地址的链接

/*获取html中的img
    @reshtml  string 包含html标签
   
   */
 
  getHtmlimg(reshtml){
    
    let tempimg = [];
       
    return new Promise(function (resolve, reject) {
      //1，匹配出图片img标签（即匹配出所有图片），过滤其他不需要的字符

      let imgReg = /|\/>)/gi,            //匹配图片（g表示匹配所有结果i表示区分大小写）
        srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i, //匹配src属性
        arr = reshtml.match(imgReg);                  //所有已成功匹配图片的数组

      //2.从匹配出来的结果（img标签中）循环匹配出图片地址（即src属性）

      for (var i = 0; i < arr.length; i++) {
        let src = arr[i].match(srcReg);
        if (src[1]) {
          tempimg.push(src[1])
        }


      }

      return resolve(tempimg) 
     
    })
  },

3 找出图片临时地址

因为我要用临时地址重新上传图片 到指定目录

/抽离出要上传图片的临时地址
   for (let k = 0; k

解决editor图片冗余占用空间的问题，必须依赖 问题1
tip： 删除对应的APi 是指editor里删除图片对应的funcion
撤销、清空 有对应的方法，而图片删除只是在富文本编辑器里删除了图片而没
有对应的删除方法。

到此结束.. 真正的实现还是期待官网多给予支持，现在只能暂时用下这蹩脚的方案！