前言
最近在搭个人博客网站，需要一个
markdown 编辑器，来进行博客的编写看了网上的教程，决定使用
simplemde 以为可以直接能拿来用的
不过实际运用的时候发现还是有要完善的地方
比如令人头疼的图片上传
最终效果
安装及初始化
npm install simplemde --save在html中加入一个textarea
<textarea id="simplemde"></textarea>在vue的生命周期函数 mounted 中，添加 simplemde 的实例化
var simplemde = new SimpleMDE({
el: document.getElementById(simplemde)
})el 通过dom指定为我们建立的textarea元素，如果省略，则会自动抓取html结构中的第一个textarea
绑定事件，使我们的内容数据始终与 simplemde 获取到的键入数据同步
simplemde.codemirror.on("change", () => {
this.content = simplemde.value()
})上传图片
在原本的 simplemde 中
点击图片按钮的效果是这样的
这是个啥？？本地上传的选择框呢？？
没办法，既然没有就只好自己做一个了
首先我们建立一个隐藏的 input
<input style="display:none" accept="image/gif,image/jpeg,image/jpg,image/png" type="file" id="upInput" ref="upInput">接收图片格式的文件，点击即可弹出本地上传的文件选择框
之所以要隐藏，是因为我们并不想要这个按钮
我们还是想通过点击 simplemde 的图片按钮来上传
虽然人家没啥用，但好看呀
所以我们就把这个 input 给隐藏，只用一下它的 click 方法
这样我们点击图片按钮就相当于在点击这个 input
在 simplemde 的源码里，找到图片按钮调用的函数
把原来的都注释掉，加上这两句
这样我们就可以调用本地上传的选择框了
那么选择了图片之后，为了能即时预览
我们希望选择之后，就发到后端存储起来
