在vue中用simplemde实现标记编辑器(增加图片上传功能)

时间：2021-08-25 来源：互联网编辑：宝哥软件园浏览：次

前言

最近，我正在建立一个个人博客网站，我需要一个降价编辑来写我的博客

看完在线教程，我决定使用simplemde

我想我可以直接用它

然而，在实践中，发现仍有改进的余地

比如上传图片的头疼

最终效果

安装和初始化

npm安装simplemde -保存

向html添加文本区域

textareid=' simplemde '/textarea在vue挂载的生命周期函数中，添加simple mde的实例化

var Simple MDE=New Simple MDE({ El : document。getElementByid (SimpleMDE)}) El指定通过dom为我们创建的textarea元素，如果省略，html结构中的第一个textarea将被自动抓取。

绑定事件，以便我们的内容数据总是与simplemde获得的类型化数据同步

通过simple mde . code mirror . on(' change '，()={ this . content=simple mde . value()})上传图片

在最初的simplemde中，

点击图片按钮的效果如下

这是什么？本地上传的选择框呢？

我没办法。因为我没有，所以我必须自己做一个

首先，我们创建一个隐藏的输入

输入样式=' display : none ' accept=' image/gif，image/JPEG，image/jpg，image/png ' type=' file ' id=' up put ' ref=' up put '接收图片格式的文件，点击弹出本地上传的文件选择框

我们想把它藏起来，因为我们不想要这个按钮。

我们仍然想通过点击simplemde的图片按钮来上传它

人虽然没用，但很美

所以让我们隐藏这个输入，只使用它的click方法

这样，当我们点击图片按钮时，就相当于点击了这个输入

在simplemde的源代码中，找到图片按钮调用的函数

注释掉所有的原文，加上这两句话

这样，我们可以调用本地上传的选择框

然后选择图片后，为了立即预览，

我们希望在选择之后，将它发送到后端进行存储

在前端，我们使用axios formdata发送

var输入=这个。$ refs . upputvar form data=new form data()form data . append(' I '，Input。文件[0])var config={ headers : { ' content-type ' : ' multipart/form-data ' } }此。$ axios。post ('/data/myupload '，formdata，config)是后端。我使用节点并使用多模块来接收它

Multer专门用于处理多部分/表单数据格式的数据

Var multer=require('multer') //定义内存var storage=multer . disk storage({//存储路径destination:函数(req，file，CB) {CB (null，/static/upload/') }，//保存文件名filename:function (req，file，CB) {CB (null，` $ {date。now ()}-$ {file。original name } `)})})//使用内存varupload=multer({ storage 3360 storage })//接受上传路由器. post('/data/myupload '，Upload.single ('I ')，函数(req，RES，next){//将存储的文件名发送回前端RES . send(req . file . filename)})；接收到文件名后，前端将其与存储路径打包并写入文本框

也就是之前点击图片按钮看到的字符串

写完后可以预览

这个。$axios.post('/data/myupload '，formData，config)。然后((res)={ var urlname=`！[](/static/upload/$ { RES . data })` simple mde . value(` $ { this . content } \ n $ { URL name } \ n `)似乎没问题。

但实际上，还是有一点缺失

也就是输入本身的click()并不是异步的，但是你选择图片是需要时间的。在这个过程中，以下代码(甚至是异步代码)执行一次，这意味着现在写的所有发送存储都是在选择图片之前执行的。

为了在选择图片后执行，

我们添加一个监听事件，监听输入的变化，并把之前所有的代码都扔进去

var输入=这个。$ refs . upiputinput . addeventlistener(' change '，()={ var formData=new formData(). formData . append(' I '，input . files[0])var config={ headers : { ' Content-Type ' : ' multipart/form-data ' } }这。$axios.post('/data/myupload '，formData，config)。然后((res)={ var urlname=`！[](/static/upload/$ { RES . data })` simple mde . value(` $ { this . content } \ n $ { URL name } \ n `)}))，这样我们就可以上传我们的图片了。

显示

例如，通过编辑器，我们编写了一个博客并将其存储在后台

我想把它显示在其他组件中

也就是说，字符串被转换为html

只需调用simplemde的原型链方法

这个。内容减价=simplemde。原型。标记(内容),然后将数据放入v-html

可以显示Div v-html='内容减价'/div

再看最后的效果

附言（同postscript）；警官（police sergeant）

还有一些事情可以改进

例如，直接拖放图片或粘贴图片

我以后有时间研究它，另外