MavonEditor是一個(gè)用于編輯markdown的JavaScript庫,搭配Vue.js,非常適合博客網(wǎng)站,界面也很漂亮.可以使用npm安裝,今天就讓我們來了解一下,這個(gè)庫的使用.
首先,我們安裝它:

npm install mavon-editor --save

我們需要在程序的main.js中引入并注冊:

import 'mavon-editor/dist/css/index.css';
import mavonEditor from "mavon-editor";
Vue.use(mavonEditor);

然后可以從我們的vue文件中使用它:

<mavon-editor/>

此時(shí)界面如圖所示:

然后我們需要對它進(jìn)行一些配置,比如說圖片的上傳,刪除,文章的保存和配置他的顯示,首先,我們配置它顯示的按鈕,其中我們可以看到非常多的按鈕,但有些并不是我們想要的,比如右邊的那個(gè)顯示HTML源代碼.所以現(xiàn)在,我們可以通過一些配置設(shè)定每個(gè)按鈕的顯示.首先,在標(biāo)簽中配置:

<mavon-editor :toolbars="toolbars"/>

注意這里的toolbars是我們要在視圖函數(shù)中定義的一個(gè)變量.
視圖函數(shù):

data(){
    return {
        toolbars: {
            bold: true, // 粗體
            italic: true, // 斜體
            header: true, // 標(biāo)題
            underline: true, // 下劃線
            strikethrough: true, // 中劃線
            mark: true, // 標(biāo)記
            superscript: true, // 上角標(biāo)
            subscript: true, // 下角標(biāo)
            quote: true, // 引用
            ol: true, // 有序列表
            ul: true, // 無序列表
            link: true, // 鏈接
            imagelink: true, // 圖片鏈接
            code: true, // code
            table: true, // 表格
            fullscreen: true, // 全屏編輯
            readmodel: true, // 沉浸式閱讀
            htmlcode: true, // 展示html源碼
            help: true, // 幫助
            undo: true, // 上一步
            redo: true, // 下一步
            trash: true, // 清空
            save: true, // 保存（觸發(fā)events中的save事件）
            navigation: true, // 導(dǎo)航目錄
            alignleft: true, // 左對齊
            aligncenter: true, // 居中
            alignright: true, // 右對齊
            subfield: true, // 單雙欄模式
            preview: true // 預(yù)覽
      }
    }
}

我們只需要調(diào)整其中的屬性就可以控制按鈕的顯示和隱藏,設(shè)置為true的顯示,為false的隱藏,注意不能只設(shè)置false的,必須設(shè)置每個(gè)是true的,否則沒設(shè)置的一樣不顯示.

現(xiàn)在,我們只需要將htmlcode的按鈕改為false,就不會(huì)有這個(gè)按鈕了.效果如圖所示,可以看到,原來那個(gè)HTML按鈕不見了:

接下來我們需要設(shè)置上傳圖片的事件,否則本地的圖片是無法上傳到服務(wù)器的.由于各個(gè)服務(wù)器的接口不一樣,所以我這里只是講一下上傳圖片的接口,展示一下我的代碼.
我們可以在mavon-editor里直接配置事件,這里我要實(shí)現(xiàn)的功能是,上傳圖片時(shí)將圖片同步上傳到服務(wù)器,并用服務(wù)器的地址替換掉這里的地址,刪除圖片時(shí)同步刪除服務(wù)器里的圖片,我的代碼:
html部分:

<mavon-editor
    v-model="value"
    :toolbars="toolbars"
    @imgAdd="addImg"
    @imgDel="delImg"
    ref="md"
/>

接口解釋:
imgAdd:圖片上傳事件,接受參數(shù)pos圖片路徑,file圖片文件
imgDel:圖片刪除事件,接受一個(gè)數(shù)組,格式為(pos,file).

    import Axios from "axios";
    addImg(pos, file) {
      var formData=new FormData();     //新建一個(gè)表單數(shù)據(jù),用于提交文件
      formData.append("img",file);     //添加文件,參數(shù)分別是表單參數(shù)的名字和值.
      Axios.post("/api/edit/uploadImg",formData,{     //使用Axios進(jìn)行上傳圖片
        headers:{
          "Content-Type":"multipart/form-data"    //設(shè)置請求頭,更換內(nèi)容類型為表單數(shù)據(jù)
        }
      }).then((response)=>{     //傳輸之后將url替換
        var data=response.data;     //data為響應(yīng)返回的數(shù)據(jù)
        if(data.message=="no signIn"){     //如果還沒有登陸
          this.$router.push("/user/signIn")     //路由跳轉(zhuǎn)
        }else{     //否則
          this.$refs.md.$img2Url(pos,data.url);     //將原來的圖片url替換成data.url,注意$img2Url是自帶的函數(shù).
        }
      });
      this.imgs[pos] = file;     //記錄圖片.
    },
    delImg(pos) {
      pos=pos[0];     //首先獲取到圖片的原來的url
      Axios.post("/api/edit/deleteImg?imgId="+pos);     //通過Axios刪除圖片
      delete this.imgs[pos];     //刪除之前記錄的圖像字典中的數(shù)據(jù)
    }

效果如圖所示:

最后就是保存工作了,我們?nèi)匀煌ㄟ^事件進(jìn)行保存.
html:

<mavon-editor
    v-model="value"
    :toolbars="toolbars"
    @imgAdd="addImg"
    @imgDel="delImg"
    @save="save"
    ref="md"
/>

js:

save(md, html) {
  Axios.post("/api/blog/edit",{
    inner:this.value,
    title:this.title
  })
}

最后,展示一下項(xiàng)目完整的效果.

以上是這篇文章的全部,錯(cuò)誤的地方懇請指正.
QQ:8955859,希望能和大家一起學(xué)習(xí).
最后,都看到這了,贊賞一下唄!(^ ~ ^||).