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删除相应的图片
  }
}

  显示效果如下：

vuemarkdown.png

  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>     

  显示效果如下：

articile.png

---

 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>

  显示效果如下：

zhanshi.png

---

总结：

  整体来说还是很简单的只是用到了 mavonEditor 和 github-markdown-css 都是自己探索出来的，整体效果还是不错的

个人博客网站 https://www.askajohnny.com 欢迎来访问！
本文由博客一文多发平台 OpenWrite 发布！