前言

最近在搭個(gè)人博客網(wǎng)站，需要一個(gè) markdown 編輯器，來(lái)進(jìn)行博客的編寫

看了網(wǎng)上的教程，決定使用 simplemde

以為可以直接能拿來(lái)用的

不過(guò)實(shí)際運(yùn)用的時(shí)候發(fā)現(xiàn)還是有要完善的地方

比如令人頭疼的圖片上傳

最終效果

安裝及初始化

npm install simplemde --save

在html中加入一個(gè)textarea

<textarea id="simplemde"></textarea>

在vue的生命周期函數(shù) mounted 中，添加 simplemde 的實(shí)例化

var simplemde = new SimpleMDE({
   el: document.getElementById(simplemde)
  })

el 通過(guò)dom指定為我們建立的textarea元素，如果省略，則會(huì)自動(dòng)抓取html結(jié)構(gòu)中的第一個(gè)textarea

綁定事件，使我們的內(nèi)容數(shù)據(jù)始終與 simplemde 獲取到的鍵入數(shù)據(jù)同步

simplemde.codemirror.on("change", () => {
   this.content = simplemde.value()
  })

上傳圖片

在原本的 simplemde 中

點(diǎn)擊圖片按鈕的效果是這樣的

這是個(gè)啥？？本地上傳的選擇框呢？？

沒(méi)辦法，既然沒(méi)有就只好自己做一個(gè)了

首先我們建立一個(gè)隱藏的 input

<input style="display:none" accept="image/gif,image/jpeg,image/jpg,image/png" type="file" id="upInput" ref="upInput">

接收?qǐng)D片格式的文件，點(diǎn)擊即可彈出本地上傳的文件選擇框

之所以要隱藏，是因?yàn)槲覀儾⒉幌胍@個(gè)按鈕

我們還是想通過(guò)點(diǎn)擊 simplemde 的圖片按鈕來(lái)上傳

雖然人家沒(méi)啥用，但好看呀

所以我們就把這個(gè) input 給隱藏，只用一下它的 click 方法

這樣我們點(diǎn)擊圖片按鈕就相當(dāng)于在點(diǎn)擊這個(gè) input

在 simplemde 的源碼里，找到圖片按鈕調(diào)用的函數(shù)

把原來(lái)的都注釋掉，加上這兩句

這樣我們就可以調(diào)用本地上傳的選擇框了

那么選擇了圖片之后，為了能即時(shí)預(yù)覽

我們希望選擇之后，就發(fā)到后端存儲(chǔ)起來(lái)

在前端我們運(yùn)用 axios + formdata 進(jìn)行發(fā)送

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 ，運(yùn)用 multer 模塊來(lái)接收

multer 是專門用來(lái)處理 mulipart/form-data 格式的數(shù)據(jù)的

var multer = require('multer')
    //定義存儲(chǔ)器
  var storage = multer.diskStorage({
  //存儲(chǔ)路徑
  destination: function (req, file, cb) {
    cb(null, '../static/upload/')
  },
  //存儲(chǔ)文件名
  filename: function (req, file, cb) {
    cb(null, `${Date.now()}-${file.originalname}`)
  }
  })
  //運(yùn)用存儲(chǔ)器
  var upload = multer({ storage: storage })

  // 接受單圖的上傳
  router.post('/data/myupload', upload.single('i'), function (req,  res, next) {
  //將存儲(chǔ)后的文件名發(fā)還給前端
  res.send(req.file.filename)
  });

前端收到文件名后，將其跟存儲(chǔ)路徑打包寫進(jìn)文本框中

也就是之前點(diǎn)擊圖片按鈕看到的那串字符

寫入后就可預(yù)覽

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

看起來(lái)萬(wàn)事大吉了

但其實(shí)還漏了一點(diǎn)

那就是input的click()本身不是異步的，但是你選擇圖片需要時(shí)間，在這過(guò)程中后面的代碼（即便是異步代碼）都執(zhí)行了一遍，也就是說(shuō)現(xiàn)在寫的這些發(fā)送存儲(chǔ)都在選完圖片之前就執(zhí)行完了

為了在選擇完圖片之后再執(zhí)行

我們新增一個(gè)監(jiān)聽事件，監(jiān)聽 input 的 change ，把之前的代碼都丟到這里面來(lái)

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`)
 })
})

這樣就實(shí)現(xiàn)了我們的圖片上傳效果

顯示

比如通過(guò)編輯器，我們寫了一篇博客，并存儲(chǔ)進(jìn)了后臺(tái)

想在別的組件中把它調(diào)出來(lái)顯示

也就是字符串轉(zhuǎn)為html

只需要調(diào)用 simplemde 的原型鏈方法

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

然后把數(shù)據(jù)放到v-html中

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

即可顯示

再看一遍最終效果

PS

還有一些可以完善的地方

比如直接拖拽圖片進(jìn)來(lái)，或者粘貼

后期有時(shí)間研究一下再加上

總結(jié)

以上所述是小編給大家介紹的vue中利用simplemde實(shí)現(xiàn)markdown編輯器（增加圖片上傳功能）,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！