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

【基础版本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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容