评论

云开发editor

跨过一座山,跌入一个坑!

首先了解下小程序自带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中<img> 标签并封装成数组

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

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

      let imgReg = /<img.*?(?:>|\/>)/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<editorimage.length;k++){
      
       for (let i=0;i<tempimg.length;i++){

         if (editorimage[k][1] == tempimg[i]){
           tempPath[i] = editorimage[k][0][0]
         }
         
       }
   }

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

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

最后一次编辑于  2019-07-31  
点赞 1
收藏
评论

1 个评论

登录 后发表内容