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

fobnn 發布于2019-08-23 17:12 / 496人閱讀

摘要：前言最近在搭個人博客網站，需要一個編輯器，來進行博客的編寫看了網上的教程，決定使用以為可以直接能拿來用的不過實際運用的時候發現還是有要完善的地方比如令人頭疼的圖片上傳最終效果安裝及初始化在中加入一個在的生命周期函數中，添加的實例化通過指

前言

最近在搭個人博客網站，需要一個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中

即可顯示

再看一遍最終效果

還有一些可以完善的地方
比如直接拖拽圖片進來，或者粘貼
后期有時間研究一下再加上

GPU云服務器云服務器編輯器圖片上傳 markdown在線編輯器實現圖片上傳 asp實現上傳圖片

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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/...

curlyCheng 2019-08-26 13:43 評論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/...

ninefive 2019-06-26 18:03 評論0 收藏0