vue 实现ps图片编辑_vue中利用simplemde实现markdown编辑器（增加图片上传功能）

前言

最近在搭个人博客网站，需要一个markdown编辑器，来进行博客的编写

看了网上的教程，决定使用 simplemde

以为可以直接能拿来用的

不过实际运用的时候发现还是有要完善的地方

比如令人头疼的图片上传

最终效果

安装及初始化

npm install simplemde --save

在html中加入一个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 中

点击图片按钮的效果是这样的

这是个啥？？本地上传的选择框呢？？

没办法，既然没有就只好自己做一个了

首先我们建立一