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

说明

此篇文章是作为我以前的编辑器上传图片的基础上进行的图片外链的处理，及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);}}}}}
}

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

html保存word文档到本地,保存在本地网页文件另存为word文档,图片怎么处理?
镜子前的我,身着华丽的晚礼服,显得楚楚动人,淡妆过后的脸上泛起了阵阵红晕,内心的激动可想而知.今晚我要去参加一个特殊的宴会--庆祝姚老师五十大寿,噢,姚老师--我二十年前的班主任.想到就要和那么多同学 ...
将网页保存到本地mhtml文件，包含样式与图片
用代码实现浏览器网页右键另存为单个脱机文件的功能 from selenium import webdriverdriver = webdriver.Chrome() url = 'https://ww ...
uniapp 生成分享图片(图片+二维码)，并保存到本地相册功能实现
生成分享图片使用场景在使用电商app时,通常有个分享给好友的功能,如果想要做分销类型,发展下线,也就是你邀请的好友是你的下级的话,就需要分享时将个人信息附带进去,因此会涉及到生成分享图片. 界面 ...
php curl 下载图片,CURL实现下载远程图片并保存到本地
WEB开发中我们经常使用一些简单的采集功能,这样可以自动把远程服务器的图片或资源直接采集保存到本地服务器中:实现下载远程图片并把它保存到本地有很多方法,比如可以直接能过file_get_content ...
(Metro学习三)图片uri保存到本地图片库
已知网络上图片的uri地址,如何将网络图片保存到本地呢?代码如下: 保存图片到本地 private async Task SaveImageFromUrl(string uri, string fil ...
java base64转图片并保存_java将base64解析图片保存到本地。
将base64解析图片保存到本地的两个方法 /** * base64转图片 * @param base64str base64码 * @param savePath 图片路径 * @return */ ...
PHP高效下载图片保存到本地
PHP如何怎么样高效下载图片保存到本地? 直接上代码: /*** 下载图片,保存到本地文件* * @param string $url* @param string $saveFile* @retur ...
vue中使用Ueditor编辑器 -- 1
一. 下载包: 从Ueditor的官网下载1.4.3.3jsp版本的Ueditor编辑器,官网地址为:http://ueditor.baidu.com/website/download.html ...
Unity3D Editor 编辑器扩展3 Editor脚本
Unity3D Editor 编辑器扩展3 Editor脚本环境:Unity2017.2 语言:C# 总起: 在编辑Unity项目的时候,总不可能避免的接触到Unity自身自带的Inspector参 ...
Vue 自定义富文本编辑器 tinymce 支持导入 word 模板
自定义富文本编辑器分为前端项目和后端项目两个部分,首先先说一下前端项目前端前端项目地址: https://github.com/haoxiaoyong1014/editor-ui 编辑器名称: t ...

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

说明

上传

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

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

最新文章

热门文章