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

fobnn 发布于2019-08-23 17:12 / 386人阅读

摘要：前言最近在搭个人博客网站，需要一个编辑器，来进行博客的编写看了网上的教程，决定使用以为可以直接能拿来用的不过实际运用的时候发现还是有要完善的地方比如令人头疼的图片上传最终效果安装及初始化在中加入一个在的生命周期函数中，添加的实例化通过指

前言

最近在搭个人博客网站，需要一个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中
点击图片按钮的效果是这样的

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

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

首先我们建立一个隐藏的input

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

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

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

那么选择了图片之后，为了能即时预览
我们希望选择之后，就发到后端存储起来
在前端我们运用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}
${urlname}
`)
  })

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

那就是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}
${urlname}
`)
  })
})

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

显示

比如通过编辑器，我们写了一篇博客，并存储进了后台
想在别的组件中把它调出来显示
也就是字符串转为html

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

this.contentMarkdown = SimpleMDE.prototype.markdown(content)

然后把数据放到v-html中

即可显示

再看一遍最终效果

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

海外云主机服务器托管编辑器图片上传 markdown在线编辑器实现图片上传 asp实现上传图片

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103960.html

js拖拽粘贴上传与CodeMirror

摘要：属性介绍默认是默认是在粘贴操作时为空剪切板中的各项数据剪切板中的数据类型。避免重复创建上传中文件成功失败处理已上传上传出错添加文件到队列并上传开始上传其他参考获取剪切板内容，控制图片粘贴在线代码编辑器事件说明 Markdown编辑器选用https://simplemde.com它是一款纯js实现的markdown编辑器。缺点不支持图片上传。那我们就得改造它。simplemde是基于co...

FullStackDeveloper 2019-08-20 12:09 评论0 收藏0
VueCli+Node+mongodb打造个人博客（含前台展示及后台管理系统）（中）

摘要：前言前文打造个人博客含前台展示及后台管理系统上地址在上篇文章中我们完成了后端的配置，实现了对数据的增删查改现在只需要前端页面发送对应的请求给后端即可引入在开始搭建组件前，我们先要确定前端异步请求的方式这里我用的是先在中将其引入这样我们就可以前言前文：VueCli+Node+mongodb打造个人博客（含前台展示及后台管理系统）（上）https://segmentfault.com/...

caikeal 2019-08-02 16:16 评论0 收藏0
VueCli+Node+mongodb打造个人博客（含前台展示及后台管理系统）（中）

摘要：前言前文打造个人博客含前台展示及后台管理系统上地址在上篇文章中我们完成了后端的配置，实现了对数据的增删查改现在只需要前端页面发送对应的请求给后端即可引入在开始搭建组件前，我们先要确定前端异步请求的方式这里我用的是先在中将其引入这样我们就可以前言前文：VueCli+Node+mongodb打造个人博客（含前台展示及后台管理系统）（上）https://segmentfault.com/...

hiyang 2019-08-30 10:50 评论0 收藏0
VueCli+Node+mongodb打造个人博客（含前台展示及后台管理系统）（中）

摘要：前言前文打造个人博客含前台展示及后台管理系统上地址在上篇文章中我们完成了后端的配置，实现了对数据的增删查改现在只需要前端页面发送对应的请求给后端即可引入在开始搭建组件前，我们先要确定前端异步请求的方式这里我用的是先在中将其引入这样我们就可以前言前文：VueCli+Node+mongodb打造个人博客（含前台展示及后台管理系统）（上）https://segmentfault.com/...

curlyCheng 2019-08-26 13:43 评论0 收藏0
VueCli+Node+mongodb打造个人博客（含前台展示及后台管理系统）（中）

摘要：前言前文打造个人博客含前台展示及后台管理系统上地址在上篇文章中我们完成了后端的配置，实现了对数据的增删查改现在只需要前端页面发送对应的请求给后端即可引入在开始搭建组件前，我们先要确定前端异步请求的方式这里我用的是先在中将其引入这样我们就可以前言前文：VueCli+Node+mongodb打造个人博客（含前台展示及后台管理系统）（上）https://segmentfault.com/...

ninefive 2019-06-26 18:03 评论0 收藏0