在vue中使用simplemde实现markdown编辑器（添加图片上传功能）

前言最近搭建了一个个人博客站点，需要一个markdown编辑器来写博客。看了网上的教程，决定使用simplemde，觉得可以直接用。不过在实际使用中，我发现还是有需要改进的地方。上传图片最头疼的最终效果安装初始化npminstallsimplemde--save在html中添加一个textarea在vue的生命周期函数mounted中，添加simplemde的实例化varsimplemde=newSimpleMDE({el:document.getElementById(simplemde)})el指定我们通过dom创建的textarea元素，如果省略，会自动抓取html结构中的第一个textarea绑定事件，让我们的内容数据始终与simplemde获取的打字数据simplemde.codemirror.on("change",()=>{this.content=simplemde.value()})上传图片原simplemde中点击图片按钮的效果如下什么是这？？本地上传的选择框呢？？没办法，既然没有，就得自己弄一个。首先，我们创建一个隐藏的input接收图片格式文件，点击弹出本地上传文件选择框。之所以隐藏文件选择框，是因为我们不要这个按钮。我们还是想点击simplemde图片按钮，虽然别人上传没用，但是好看，所以我们隐藏这个input，直接用它的click方法，这样我们点击图片按钮，相当于点击input中的inputsimplemde的源码，找到图片按钮调用函数把原来的都注释掉了，加上这两句，这样我们就可以调用本地上传的选择框了。然后选中图片后，为了实时预览，我们要将其发送到后台，存储到前台。axios+formdata发送varinput=this.$refs.upInputvarformData=newFormData()formData.append("i",input.files[0])varconfig={headers:{"Content-Type":"multipart/form-data"}}this.$axios.post("/data/myupload",formData,config)我使用node作为后端，使用multer模块接收multer是一个varmulter，专门用来处理mulipart/form-data中的数据format=require('multer')//定义存储varstorage=multer.diskStorage({//存储路径destination:function(req,file,cb){cb(null,'../static/upload/')},//存储文件名filename:function(req,file,cb){cb(null,`${Date.now()}-${file.originalname}`)}})//使用内存varupload=multer({storage:storage})//接受单张图片的上传router.post('/data/myupload',upload.single('i'),function(req,res,next){//存储的文件name传回给前端res.send(req.file.filename)});前端收到文件名后，将其和存储路径打包写入文本框，也就是写入之前点击图片按钮看到的字符串后，可以预览this.$axios。post("/data/myupload",formData,config).then((res)=>{varurlname=``simplemde.value(`${this.content}\n${urlname}\n`)})看似一切正常，其实还少了一个东西，就是input本身的click()不是异步的，只是你选择图片需要时间。在这个过程中，后面的代码（甚至是异步代码）都执行了一次，也就是说现在写的发送和存储都是在选中图片之前执行的。为了在图片被选中之后然后执行我们添加一个新的监听事件，监听输入的变化，把之前的代码全部丢进去varinput=this.$refs.upInputinput.addEventListener("change",()=>{varformData=newFormData()formData.append("i",input.files[0])varconfig={headers:{"Content-Type":"multipart/form-data"}}这个。$axios.post("/data/myupload",formData,config).then((res)=>{varurlname=``simplemde.value(`${this.content}\n${urlname}\n`)})})这样我们的图片上传效果展示就实现了。比如通过编辑器，我们写了一篇博客，存储在后台，想在其他组件中调用出来显示，也就是把一个字符串转成html，只需要调用simplemde原型链方法this即可。contentMarkdown=SimpleMDE.prototype.markdown(content)然后把数据放到v-html