vue使用mavon-editor编辑器，外链保存到本地，且A标签外链和图片外链的处理

最新推荐文章于 2024-04-20 06:50:51 发布

码代码的阿宅

最新推荐文章于 2024-04-20 06:50:51 发布

阅读量2.6k

点赞数

文章标签： vue.js javascript html5 jquery

本文链接：https://blog.csdn.net/qq_38394175/article/details/113514202

版权

说明

此篇文章是作为我以前的编辑器上传图片的基础上进行的图片外链的处理，及A标签外链和图片外链冲突的问题。因此，就不放引入的详细代码了，如有需要，请点击此连接查看以前的文章

上传

async $imgAdd(pos, $file, bool, type, index) {
      let self = this;
      self.saving = true;
      let fullImgPath;
      if (bool) {
        const res = await uploadUrl($file, "", this.token, index);
       if (self.$refs.md.d_value.length) {  //判断外是否有外链
            let imgName; 
            self.$refs.md.d_value = self.$refs.md.d_value.replace(
              $file,
              "loading..."
            );
            //进行替换
            const img_reg_str = /!\[[^\)]*\]\(loading...\)/g;
            const imgPatt = new RegExp(img_reg_str);
            const imgString = imgPatt.exec(self.$refs.md.d_value);
            imgName = imgString[0].split("![")[1].split("](")[0];
            if (res.ret_code === 200) {
              fullImgPath = self.gb.imgPath(res.result.image_url);
              self.mdImgMap[pos] = fullImgPath;
              self.$emit("update-imgmap", pos, fullImgPath);
              self.$refs.md.d_value = self.$refs.md.d_value.replace(
                img_reg_str,
                `![${imgName}](${fullImgPath})`
              );
              self.saving = false;
            } else {
              self.$refs.md.d_value = self.$refs.md.d_value.replace(
                img_reg_str,
                ""
              );
              self.gb.msgToast("error", "文件上传失败");
            }
          }
      } else {
        let res = await uploadFile($file, self.token);
        if (res.ret_code === 200) {
          fullImgPath = self.gb.imgPath(res.result.image_url);
          self.mdImgMap[pos] = fullImgPath;
          self.$emit("update-imgmap", pos, fullImgPath);
          self.saving = false;
        } else {
          self.$refs.md.$refs.toolbar_left.$imgDel(pos);
          self.gb.msgToast("error", "文件上传失败");
        }
      }
    },

编辑器内容发生改变就触发的事件

// 所有操作都会被解析重新渲染
changeMavon(value, render) {
	  let self = this;
      let addLinkDom = document.querySelector(".add-image-link");
      let addLinkTitle = $(".add-image-link .title");
      let reg = /(http|https):\/\/([\w.]+\/?)\S*/gi;
      let valueMatch = value.match(reg);  //外链的数组
      //if判断是走的外链图片还是A外链
      if (addLinkTitle.html() == "添加链接") { 
      } else {
        if (addLinkDom) {
          let haveEmlem = [".png)",".jpg)",".jpeg)",".PNG)",".JPG)",".JPEG)"];  //根据获取到的数据图片后面的格式进行判断，因我的数据有一个），可能没人后面不一样，根据自身情况进行
          // let haveEmlem = /\.(png|jpg|gif|jpeg|PNG|JPG|JPEG|GIF)$/
          for (let k = 0; k < haveEmlem.length; k++) { 
            for (let i = 0; i < valueMatch.length; i++) {
              let lastFive = valueMatch[i].substring(valueMatch[i].length - 4);//获取后5位数据
              if (haveEmlem[k].indexOf(lastFive) != -1) {  //判断定义的图片格式是否存在，如果存在则替换
                let picLink;
                picLink = valueMatch[i].replace(/\)/g, "");
                self.$imgAdd(i, picLink, true);
              }
            }
          }
        }
      }
}