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


Posted in Javascript onApril 29, 2019

前言

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

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

以为可以直接能拿来用的

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

比如令人头疼的图片上传

最终效果

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

安装及初始化

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 中

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

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

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

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

首先我们建立一个隐藏的 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 的源码里,找到图片按钮调用的函数

把原来的都注释掉,加上这两句

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

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

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

那么选择了图片之后,为了能即时预览

我们希望选择之后,就发到后端存储起来

在前端我们运用 axios + formdata 进行发送

var input = this.$refs.upInput
var 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()}-${file.originalname}`)
  }
  })
  //运用存储器
  var upload = multer({ storage: storage })

  // 接受单图的上传
  router.post('/data/myupload', upload.single('i'), function (req,  res, next) {
  //将存储后的文件名发还给前端
  res.send(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.upInput
input.addEventListener("change", () => {
 var formData = 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中

<div v-html="contentMarkdown"></div>

即可显示

再看一遍最终效果

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

PS

还有一些可以完善的地方

比如直接拖拽图片进来,或者粘贴

后期有时间研究一下再加上

总结

以上所述是小编给大家介绍的vue中利用simplemde实现markdown编辑器(增加图片上传功能),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JavaScript XML实现两级级联下拉列表
Nov 10 Javascript
DOM 脚本编程中的兄弟节点
Oct 31 Javascript
js简单正则验证汉字英文及下划线的方法
Nov 28 Javascript
详解jQuery简单的表单应用
Dec 16 Javascript
CSS+jQuery实现简单的折叠菜单
Dec 20 Javascript
js实现返回顶部效果
Mar 10 Javascript
JS实现仿UC浏览器前进后退效果的实例代码
Jul 17 Javascript
vue动画之点击按钮往上渐渐显示出来的实例
Sep 29 Javascript
js实现图片局部放大效果详解
Mar 18 Javascript
解决VUE双向绑定失效的问题
Oct 29 Javascript
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
Oct 09 Javascript
UEditor 自定义图片视频尺寸校验功能的实现代码
Oct 20 Javascript
微信小程序调用微信支付接口的实现方法
Apr 29 #Javascript
vue实现微信分享链接添加动态参数的方法
Apr 29 #Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
Apr 29 #Javascript
微信小程序地图导航功能实现完整源代码附效果图(推荐)
Apr 28 #Javascript
详解vue 路由跳转四种方式 (带参数)
Apr 28 #Javascript
使用vue完成微信公众号网页小记(推荐)
Apr 28 #Javascript
详解VUE项目中安装和使用vant组件
Apr 28 #Javascript
You might like
php 设计模式之 单例模式
2008/12/19 PHP
PDO防注入原理分析以及使用PDO的注意事项总结
2014/10/23 PHP
关于WordPress的SEO优化相关的一些PHP页面脚本技巧
2015/12/10 PHP
基于PHP实现的多元线性回归模拟曲线算法
2018/01/30 PHP
PHP判断是否是微信打开,浏览器打开的方法
2018/03/14 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
js GridView 实现自动计算操作代码
2009/03/25 Javascript
Js获取数组最大和最小值示例代码
2013/10/29 Javascript
javascript异步编程的4种方法
2014/02/19 Javascript
jQuery搜索子元素的方法
2015/02/10 Javascript
JS中Eval解析JSON字符串的一个小问题
2016/02/21 Javascript
基于JS实现EOS隐藏错误提示层代码
2016/04/25 Javascript
第六篇Bootstrap表格样式介绍
2016/06/21 Javascript
浅谈jQuery绑定事件会叠加的解决方法和心得总结
2016/10/26 Javascript
微信小程序 获取当前地理位置和经纬度实例代码
2016/12/05 Javascript
nodejs使用express创建一个简单web应用
2017/03/31 NodeJs
基于vue.js路由参数的实例讲解——简单易懂
2017/09/07 Javascript
php main 与 iframe 相互通讯类(js+php同域/跨域)
2017/09/14 Javascript
Bootstrap-table自定义可编辑每页显示记录数
2018/09/07 Javascript
[00:26]TI7不朽珍藏III——冥界亚龙不朽展示
2017/07/15 DOTA
python使用wxPython打开并播放wav文件的方法
2015/04/24 Python
Python遍历文件夹和读写文件的实现方法
2017/05/10 Python
在django模板中实现超链接配置
2019/08/21 Python
python简单的三元一次方程求解实例
2020/04/02 Python
HTML5标签与HTML4标签的区别示例介绍
2013/07/18 HTML / CSS
瑞士图书网站:Weltbild.ch
2019/09/17 全球购物
西部世纪.net笔试题面试题
2014/04/03 面试题
大学生求职简历的自我评价
2013/10/21 职场文书
八一建军节部队活动方案
2014/02/04 职场文书
陈欧广告词
2014/03/14 职场文书
食品安全宣传标语
2014/06/07 职场文书
大学军训心得体会800字
2016/01/11 职场文书
python基于机器学习预测股票交易信号
2021/05/25 Python
详解使用 CSS prefers-* 规范提升网站的可访问性与健壮性
2021/05/25 HTML / CSS
万能密码的SQL注入漏洞其PHP环境搭建及防御手段
2021/09/04 SQL Server
MySQL数据库查询之多表查询总结
2022/08/05 MySQL