基于vue的markdown编辑器--mavon-editor插件的安装及使用

首先先来介绍一下markdown：

1. 什么是Markdown

首先，各位框架玩家一定不会陌生，因为无论是在各类框架下还是开源项目中，都会有一个.md的文件，该文件一般是项目说明文件，不仅语法简洁，而且所生成的“页面”也要比普通标记语言更加整洁明了。那么它到底是什么呢？
  Markdown是一种可以使用普通文本编辑器编写的标记语言，通过简单的标记语法，它可以使普通文本内容具有一定的格式。
  Markdown具有一系列衍生版本，用于扩展Markdown的功能（如表格、脚注、内嵌HTML等等），这些功能原初的Markdown尚不具备，它们能让Markdown转换成更多的格式，例如LaTeX，Docbook。Markdown增强版中比较有名的有Markdown Extra、MultiMarkdown、 Maruku等。这些衍生版本要么基于工具，如Pandoc；要么基于网站，如GitHub和Wikipedia，在语法上基本兼容，但在一些语法和渲染效果上有改动。

2. Markdown用途

Markdown的语法简洁明了、学习容易，而且功能比纯文本更强，因此有很多人用它写博客。世界上最流行的博客平台WordPress和大型CMS如Joomla、Drupal都能很好的支持Markdown。完全采用Markdown编辑器的博客平台有Ghost和Typecho。
  用于编写说明文档，并且以“README.md”的文件名保存在软件的目录下面。
除此之外，由于我们有了RStudio这样的神级编辑器，我们还可以快速将Markdown转化为演讲PPT、Word产品文档、LaTex论文甚至是用非常少量的代码完成最小可用原型。在数据科学领域，Markdown已经广泛使用，极大地推进了动态可重复性研究的历史进程。

vue 中如何使用

• 安装

安装mavon-editor:npm install mavon-editor --save

• 引入、配置

在要使用markdown编辑器的组件内操作：

<script>
// 导入组件 及 组件样式
import {
      mavonEditor } from 'mavon-editor'     //引入mavon-editor组件
import 'mavon-editor/dist/css/index.css'       //引入组件的样式
</script>

• 使用
  在要使用markdown编辑器的组件内操作:

<template>
    <div>
        <mavon-editor 
            v-model="content"              //进行双向绑定，既可以用来获取编辑器中的内容，又可以将内容写入编辑器
            ref="md" 
            @change="change"               //编辑器中的内容发生变化时触发的事件
            style="min-height: 600px"        
        />

        <button @click="submit">提交</button>
    </div>
</template>



<script>
export default {
     
    // 注册
    components: {
     
        mavonEditor,
    },
    data() {
     
        return {
     
            content:'', // 输入的markdown
            html:'',    // 及时转的html
        }
    },
    methods: {
     
        // 所有操作都会被解析重新渲染
        change(value, render){
             //value为编辑器中的实际内容，即markdown的内容，render为被解析成的html的内容
            this.html = render;
        },
        // 提交
        submit(){
                         //点击提交后既可以获取html内容，又可以获得markdown的内容，之后存入到服务端就可以了
            console.log(this.content);
            console.log(this.html);
        }
    },
    mounted() {
     

    }
}
</script>

效果图：