首页 > 作文

vue中利用simplemde实现markdown编辑器(增加图片上传功能)

更新时间:2023-04-03 13:47:41 阅读: 评论:0

前言

最近在搭个人博客网站,需要一个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 accept="image/gif,image/jpeg,image/jpg,image/png" type="file" id="upinput" ref="upinput">

接收图片格式的文件,点击即可弹出本地上传的文件选择框
之所以要隐藏,是因为我们并不想要这个按钮
我们还是想通过点击simplemde的图片按钮来上传
虽然人家没啥用,但好看呀

所以我们就把这个input给隐藏,只用一下它的click方法
这样我们点击图片按钮就相当于在点击这个input
在simplemde的里,找到图片按钮调用的函数
把原来的都注释掉,加上这两句

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

那么选择了图片之后,为了能即时预览
我们希望选择之后,就发到后端存储起来
在前端我们运用axios+formdata进行发送

var input = this.$refs.upinputvar formdata = new formdata()formdata.append("i", input.files[0])var config = {     headers: {       "content-type": "multipart/form-data"      }   }this.$axios.post("/data/myupload", formdata, config)

后端我是用的node,运用multer模块来接收
multer是专门用来处理mulipart/form-data格式的数据的

    var multer  = require('multer')        //定义存储器    var storage = multer.diskstorage({    //存储路径    destination: function (req, file, cb) {        cb(null, '../static/upload/')    },    //存储文件名    filename: function (req, file, cb) {        cb(null, `${date.now()}-${fil保健食品卫生许可证e.originalname}`)    }    })    //运用存储器    var upload = multer({ storage: storage })    // 接受单图的上传    router.post('/data/myupload', upload.single('i'), function (req,   res, next) {    //将存储后的文件名发还给前端    res.nd(req.file.filename)    });

前端收到文件名后,将其跟存储路径打包写进文本框中
也就是之前点击图片按钮看到的那串字符
写入后就可预览

  this.$axios.post("/data/myupload", formdata, config).then((res)=> {    var urlname=`![](/static/upload/${res.data})`    simplemde.value(`${this.content}\n${urlname}\n`)  })

看起来万事大吉了
但其实还漏了一点

那就是input的click()本身不是异步的,但是你选择图片需要时间,在这过程中后面的代码(即便是异步代码)都执行了一遍,也就是说现在写的这些发送存储都在选完图片之前就执行完了

为了在选择完图片之后再执行
我们新增一个监听事件,监听input的change,把之前的代码都丢到这里面来

var input = this.$refs.upinputinput.addeventlistener("c感动人物事迹hange", () => {  var formd琵琶的英语ata = new formdata()  formdata.append("i", input.files[0])  var config = {    headers: {      "content-type": "multipart/form-data"    }  }  this.$axios.post("/data/myupload", formdata, config).then((res)=> {    var urlname=`![](/static/upload/${res.data})`    simplemde.value(`${this.content}\n${urlname}\n`)  })})

这样就实现了我们的图片上传效果

显示

比如通过编辑器,我们写了一篇博客,并存储进了后台
想在毛泽东七律长征别的中把它调出来显示
也就是字符串转为html

只需要调用simplemde的原型链方法

this.contentmarkdown = simplemde.prototype.markdown(content)

然后把数据放到v-html中

<p v-html="contentmarkdown"></p>

即可显示

再看一遍最终效果

ps

还有一些可以完善的地方
比如直接拖拽图片进来南京大学校历,或者粘贴
后期有时间研究一下再加上

本文发布于:2023-04-03 13:47:40,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/4c489f610b5ae2ff22b98dc06b87b237.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:vue中利用simplemde实现markdown编辑器(增加图片上传功能).doc

本文 PDF 下载地址:vue中利用simplemde实现markdown编辑器(增加图片上传功能).pdf

标签:图片   按钮   上传   效果
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图