Markdown插件mavon-editor上传图片

最终效果

实现方法

这里只着重说明mavon-editor如何上传图片，其他更多配置可参考文档：mavon-editor文档。

<mavon-editorref="mdedit"class="editBox":ishljs="true":codeStyle="code_style":externalLink="externalLink"@imgAdd="imgAdd"v-model="blogContent.content"></mavon-editor>

上面代码中只需关注ref属性和@imgAdd事件，其他与上传图片功能无关。下面看一下imgAdd事件的实现：

imgAdd(pos,file){let imgData = new FormData();imgData.append('file',file);blogApi.uploadImage(imgData).then(res=>{console.log(res.data.data);console.log(this.$refs.mdedit)this.$refs.mdedit.$img2Url(pos,res.data.data)});
}

pos: 写在md中的文件名
file: 图片文件
然后通过form提交到服务端到上传接口，该接口会返回一个对应上传图片的链接，然后通过refs拿到mavon-editor的实例，通过它的$img2Url方法将md中文件名为pos的这个图片路径替换为服务端返回后的链接。

服务端接口

@PostMapping("/uploadImage")
public Rs uploadImage(MultipartFile file) throws IOException {File saveFile = new File(uploadPath);if(!saveFile.exists()) {saveFile.mkdir();}String dateTime = TimeUtil.getDate();String uuid = UUID.randomUUID().toString();String saveName = dateTime+"-"+uuid+"-"+file.getOriginalFilename();String savePathName = uploadPath+saveName;File result = new File(savePathName);file.transferTo(result);String viewUrl = uploadUrl+saveName;return RsUtil.success(viewUrl,"上传成功");}

mavon-editor还有一个事件是imgDel它是在删除图片文件后回调。可以根据自己的需求考虑是否实现该函数。

Markdown插件mavon-editor上传图片相关推荐

Wiz Editor md 为知笔记 Markdown 插件
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! Wiz. ...
markdown在线编辑器 editor.md 二次开发详细教程
markdown在线编辑器 editor.md 二次开发需求经常需要在网络论坛发布文章进行宣传,但每个论坛的编写格式存在差异,给发布带来了很大的障碍. 最近markdown格式的兴起,给广大发布者 ...
Webstorm安装Markdown插件不识别md文件的问题
前言 Webstorm作为前端的开发神器,猿猿们一定不会陌生.插件丰富,支持的语言超级多. 截至本文发稿为止,最新版为2021.1版.我之前从18版本就开始用了,到了2020.1版本,偶然发现好多插件 ...
在HTML页面中引用Markdown编辑器（Editor.md）
目录 1.下载Ediotor.md 2.引入Ediotor.md 3.确定Ediotor.md在哪里显示最近写博客项目,用到了Markdown编辑器,这里介绍一款国内好用的Markdown编辑器:E ...
vscode markdown插件_如何用Markdown写公众号
前情介绍小编使用的是mac笔记本,由于职业的关系需要编写很多技术文档和技术方案,本人喜欢用vscode编辑器利的插件来写markdown文章,本文介绍的是如何通过使用vscode来编写图文并茂的公众 ...
pycharm中安装可以贴图片的Markdown插件
方法一:(测试成功) 先安装官方推荐的Markdown support插件,再安装Paste images into MarkDown 如果Paste images into MarkDown插件在线 ...
vscode 中 markdown 插件和使用
这是一个系列,记录我前端开发常用的代码,小常识,有些是参考网上代码,(讲的可能有点烂,求不要打脸,嘤嘤嘤~~)送给那些需要的人.可以相互交流,喜欢的加我吧. Wx: Lxp911221 写markdo ...
Notepad++离线安装使用Markdown插件
1.介绍 MarkdownViewerPlusPlus是Notepad++的Markdown插件, 这个Markdown插件可以在Notepad++中实时动态渲染, 可以同步查看使用Markdown语 ...
vscode markdown_VS Code中的Markdown插件
这篇文章已经介绍过如何下载和使用VSC作为Markdown编辑器: 蓝莓的铲屎官:[Markdown] 使用vscode开始Markdown写作之旅zhuanlan.zhihu.com 本文旨在介绍 ...
sublime3：解决拼音不跟随问题+markdown插件
解决拼音不跟随问题 1.安装package control 从菜单 View - Show Console 或者 ctrl + ~ 快捷键,调出 console.将以下 Python 代码粘贴进去并 ...

Markdown插件mavon-editor上传图片

最终效果

实现方法

服务端接口

Markdown插件mavon-editor上传图片相关推荐

最新文章

热门文章