vue-html5-editor富文本编辑器抓取网络图片本地化

原创

已于 2024-05-04 18:26:28 修改 · 634 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #spring boot

于 2024-05-04 18:25:26 首次发布

在vue中使用vue-html5-editor做的文章内容编辑器，至于怎么引用可另行百度，网络上有很多介绍；本文主要介绍如何在复制粘贴的时候跳过跨域限制和禁止外站的图片请求问题。

本文的方法比较笨拙，一起交流学习。

在研究使用vue-html5-editor的过程中，并没有发现对于复制粘贴过来图片的单独处理，倒是有一个insertImageUrl方法用来处理图片通过url粘贴过来的逻辑，不会重写该方法且该方法只针对通过图片功能上传的方式，因此放弃了。

后来实在没有办法了，决定在暴露出来的监听事件updateData方法中进行改造，思路如下：
1、监听文章内容变化，使用正则判断文章内容中是否有标签，并获取判断该标签中的src属性是否含有http或者https类型的图片链接；
2、提取出来图片的url链接；
3、调用后台接口，参数为url链接，通过后台接口访问图片链接并保存图片到自己的服务器，然后返回自己的服务器的图片url链接（这块我没有实现，我简单用base64做了测试）；

前端代码：

async updateData(e = '') {
   
   
      var innerHTML = e.replace(/crossorigin="anonymous"/g,"");
      // 判断内容中是否有图片元素
      const imgRegex = /<img\s+[^>]*?src=(["'])(https?:\/\/[^\s'"]+)\1[^>]*>/g;
      var imageUrls = [];
      let match;
      while ((match = imgRegex.exec(innerHTML)) !== null) {
   
   
        // 要替换的url，调用后台接口，生成base64字符串
        var url = match[2];
        imageUrls.push(url);
        var result