温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

怎么在vue中使用simplemde实现一个markdown编辑器

发布时间:2021-04-20 16:22:02 来源:亿速云 阅读:559 作者:Leah 栏目:web开发

怎么在vue中使用simplemde实现一个markdown编辑器?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

为什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架,使用vue可以创建可维护性和可测试性更强的代码库,Vue允许可以将一个网页分割成可复用的组件,每个组件都包含属于自己的HTML、CSS、JavaScript,以用来渲染网页中相应的地方,所以越来越多的前端开发者使用vue。

安装及初始化

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  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编辑器的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注亿速云行业资讯频道,感谢各位的阅读!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI