美文网首页
【v2.80】 eidtor支持云图片路径

【v2.80】 eidtor支持云图片路径

作者: nCov | 来源:发表于2019-09-30 10:25 被阅读0次

    【基础版本2.80】 富文本editor支持云图路径

    **首先在未修复之前,富文本是不支持云图片路径(File ID),解决办法是将云图路径(File ID)替换成云图片下载地址方可显示

    下载地址后面的?sign=fd44b86c2d15a4838267a7719e1681f7&t=1567137915是可以省略不影响图片显示,这样你就会发现 下载地址与File ID 大致是一样的,所以我们通过替换File ID成下载地址

        let regsrc = cloudimg[0],
        imgReg  = new RegExp('cloud://你的File ID 格式'),            
        imgsrc = regsrc.replace(imgReg, 'https://下载格式.tcb.qcloud.la');
    

    替换后返回成HTML格式:

    <p><img src="https://xxxxxx.tcb.qcloud.la/temp/1567137350921.jpg"></p> 
    

    在2.80之前如果不替换为下载地址应该是这样的(不会显示图片)

    <p><img src="cloud://xxxxxx/temp/1567137350921.jpg"></p> 
    

    下面看基础版本2.80支持富文本编辑显示云图片id(File ID),既然支持了我们就不需要将File ID替换成下载地址,先看一下返回html结果。

    <p><img data-cloud="cloud://xxxxxx/temp/1567136413853.jpg" src="https://xxxxxx/temp/1567136413853.jpg"></p>
    

    通过以上结果你会发现,img 多了一个属性data-cloud(记录云File ID),src已经帮我们自动替换好了!
    说明2.80富文本编辑器支持显示云图片,修复的方案跟我们手动替换地址是一样的。

    我需要代码改写地方

    1. 富文本edito 不在将cloud:// xxxx 换成下载地址https://xxxxx
    2. 找出html内容的图片地址,正则里不再使用找src而是找cloud,因为这里data-cloud里的内容是我需要的

    //srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i,   //匹配src属性
    srcReg = /cloud=[\'\"]?([^\'\"]*)[\'\"]?/i,   //匹配cloud属性
    

    未修复【基础版本2.80】 富文本editor真机不支持显示本地路径图片

    未修复【基础版本2.80】 富文本editor没有图片删除的对应的Api

    相关文章

      网友评论

          本文标题:【v2.80】 eidtor支持云图片路径

          本文链接:https://www.haomeiwen.com/subject/rjhiectx.html