Vue中使用Markdown

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](https://my.oschina.net/u/1447355) (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 都是本身探索出來的，總體效果仍是不錯的

我的博客系統：https://www.askajohnny.com 歡迎訪問！ 本文由博客一文多發平臺 OpenWrite 發佈！