vue中利用simplemde實現markdown編輯器（增長圖片上傳功能）

前言

以前在搭我的博客網站，須要一個markdown編輯器，來進行博客的編寫 看了網上的教程，決定使用simplemde 覺得能夠直接能拿來用的 不過實際運用的時候發現仍是有要完善的地方 好比使人頭疼的圖片上傳

最終效果

1. markdown語法
2. 實時預覽
3. 將圖片上傳服務器
4. 最終生成html

安裝及初始化

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 style="display:none" 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.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>
複製代碼

便可顯示

再看一遍最終效果

PS

本文是將圖片存進了服務器的項目目錄中，其實也能夠把圖片上傳到圖牀之類的 而額外的一些功能，好比直接拖拽圖片進來，或者粘貼。等後期有時間研究一下再加上