Vue中使用Markdown

 本篇主要講解了在Vue專案裡如何整合和使用Markdown （mavonEditor）編輯器的，以及如何接入一款非常簡潔強大的 Markdown的樣式 （github-markdown-css），本部落格系統就是使用了 mavonEditor 和 github-markdown-css 下面我將分別講解它們是如何整合到Vue專案中

 1.Vue專案中安裝和使用mavonEditor  1.1 安裝mavonEditor

首先在Vue專案所在的終端輸入一下命令 安裝 mavon-editor

 npm install mavon-editor --save

  1.2 Vue專案中引入mavonEditor

  接著在Vue專案的 main.js 引入 mavon-editor

 import Vue from 'vue' import App from './App' import mavonEditor from 'mavon-editor' //引入mavon-editor 就是上面所安裝的 Vue.use(mavonEditor) //讓Vue使用mavonEditor

  1.3 在頁面中使用mavonEditor

  直接在頁面中使用 mavon-editor 標籤

 <mavon-editor  :toolbars="toolbars" //指定工具欄 @imgAdd="handleEditorImgAdd" //指定圖片上傳呼叫的方法，該方法主要將圖片上傳後臺，並且返回地址，替換到markdown中 @imgDel="handleEditorImgDel" //刪除圖片呼叫的方法，該方法主要呼叫後臺刪除圖片 style="height:600px" // v-model="value" //繫結 value 值 必須的 @change="change" //監聽markdown輸入 ，可以實時儲存等等。。  ref=md //指定一個用來引用markdown的 可以是任意字串 />

  貼上上面所用到的方法和toolbars 主要是圖片上傳介面

 toolbars: { bold: true, // 粗體 italic: true, // 斜體 header: true, // 標題 underline: true, // 下劃線 strikethrough: true, // 中劃線 mark: true, // 標記 superscript: true, // 上角標 subscript: true, // 下角標 quote: true, // 引用 ol: true, // 有序列表 ul: true, // 無序列表 link: true, // 連結 imagelink: true, // 圖片連結 code: false, // code table: true, // 表格 fullscreen: true, // 全屏編輯 readmodel: true, // 沉浸式閱讀 htmlcode: true, // 展示html原始碼 help: true, // 幫助 /* 1.3.5 */ undo: true, // 上一步 redo: true, // 下一步 trash: true, // 清空 save: true, // 儲存（觸發events中的save事件） /* 1.4.2 */ navigation: true, // 導航目錄 /* 2.1.8 */ alignleft: true, // 左對齊 aligncenter: true, // 居中 alignright: true, // 右對齊 /* 2.2.1 */ subfield: true, // 單雙欄模式 preview: true, // 預覽 }, 

 methods: { //監聽markdown變化 change(value, render) { this.html = render; this.blogInfo.blogMdContent = value; this.blogInfo.blogContent = render; }, //上傳圖片介面pos 表示第幾個圖片  handleEditorImgAdd(pos , $file){ var formdata = new FormData(); formdata.append('file' , $file); this.$axios .post("http://localhost:8000/blogs/image/upload/", formdata) .then(res => { var url = res.data.data; this.$refs.md.$img2Url(pos, url); //這裡就是引用ref = md 然後呼叫$img2Url方法即可替換地址 }); }, handleEditorImgDel(){ console.log('handleEditorImgDel'); //我這裡沒做什麼操作，後續我要寫上介面，從七牛雲CDN刪除相應的圖片 } }

  顯示效果如下：

  1.4 部落格展示Markdown的html

   展示部落格效果的使用 article 標籤指定 v-html 既markdown所編寫html格式的內容

  如 content = '<h2><a id="CSS_0"></a>CSS入門屬性</h2> <h3><a id="1css__1"></a>1.css 是什麼</h3>'

 <template> <article class="markdown-body" style="text-align:left" v-html="content"></article> </template> 

  顯示效果如下：

 2.Vue專案中安裝和使用 github-markdown-css  2.1 安裝github-markdown-css

 首先在Vue專案所在的終端輸入一下命令 安裝github-markdown-css

 npm install github-markdown-css

  2.2 匯入github-markdown-css

   在所需展示markdown的頁面 **import 'github-markdown-css/github-markdown.css'並且在article 標籤添class="markdown-body"**

 <style> .markdown-body { 編寫容器的一些css，根據需要進行調整，這裡是我部落格的，在github提供的.markdown-body基礎上修改的 box-sizing: border-box; min-width: 200px; /* max-width: 980px; */ /* padding: 45px; */ max-width: 98%; margin: 0 auto; box-shadow: 2px 4px 6px gray; padding-left: 20px; padding-right: 15px; padding-top: 40px; padding-bottom: 45px; margin-bottom: 100px }

 github使用的是這個 根據自己的進行調整 .markdown-body { box-sizing: border-box; min-width: 200px; max-width: 980px; margin: 0 auto; padding: 45px; }

 //這個要配合移動端 不是很理解 @media (max-width: 767px) { .markdown-body { padding: 15px; } } </style>

 //主體展示內容部分 <template> <article class="markdown-body" style="text-align:left" v-html="content"></article> </template>

 //匯入 樣式， <script> import 'github-markdown-css/github-markdown.css' //匯入 export default { name : 'MainContent', props:['content' ], data() { return {

 }; }, } </script>

  顯示效果如下：

總結：

  整體來說還是很簡單的只是用到了 mavonEditor 和 github-markdown-css 都是自己探索出來的，整體效果還是不錯的