Vue项目集成Markdown标记语言编辑器（MavonEditor）

---

前言

Markdown是一种标记语言，相较于word文档更加清晰方便，适合进行笔记等。这篇文章不讲Markdown的使用语法等内容，而是对Vue使用Markdown进行介绍。将Markdown集成进入自己项目之后，就可以在项目中使用牛批的Markdown编辑器了，听起来是不是很美妙呢。

---

一、可用的Markdown集成技术

在网上进行搜索之后，发现以下两种集成Markdown的方法是可行的。

1. vue-meditor
2. mavonEditor

我使用方法2，mavonEditor实现了Markdown集成，所以本文讲解mavonEditor的使用

二、使用步骤

1、安装mavonEditor包

npm install mavon-editor --s

2、导入并使用mavonEditor

在需要使用Markdown的Vue组件导入mavonEditor

import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'

在vue组件中使用mavonEditor：

        <el-form-item label="公告内容" prop="content">
<!--          <el-input type="textarea" v-model="form.content" :autosize="{minRows:9, maxRows:18}" placeholder="请输入公告内容"/>-->
          <mavon-editor v-model="form.content"/>
        </el-form-item>

使用起来是非常方便的，只需要加上mavon-editor然后绑定上数据就可以了。注释的部分使用的是el-input的textarea，虽然也能用，但是可用性不如Markdown。

3、官方API

可以看到界面比较友好，可以进行正常的Markdown编辑操作。

查看编辑的公告：

这里使用了mavonEditor的editable、subfield、defaultOpen和toolbarsFlag等一些属性，代码如下：

      <el-form-item label="公告内容" prop="content">
        <mavon-editor v-model="form.content"  class="formContent" :editable="!check" :subfield="!check" defaultOpen="preview" :toolbarsFlag="!check" />
      </el-form-item>

下图是MavonEditor的官方文档中的API接口，可以使用这些属性控制Markdown编辑界面：

---

总结

这篇文章主要讲了vue中引入Markdown的方法，以MavonEditor为例，讲述了详细的过程，以及用来控制Markdown编辑的属性等。
MavonEditor的GitHub官方网址：https://github.com/hinesboy/mavonEditor