vue中使用markdown编辑器

原作者：流眸Tel

网址：https://www.jianshu.com/p/474197c1f7cc

效果：

一、 安装

npm install mavon-editor --save

二、引入、配置

// 导入组件 及 组件样式
import { mavonEditor } from "mavon-editor";
import "mavon-editor/dist/css/index.css";

三、使用

//绑定model
//实时改变：将markdown实时转化为html
<template>
  <div class="homme">
    <mavon-editor
      v-model="content"
      ref="md"
      @change="change"
      style="min-height: 600px"
    />
    <button @click="submit">提交</button>
  </div>
</template>

//js代码
<script>
import { mavonEditor } from "mavon-editor";
import "mavon-editor/dist/css/index.css";
export default {
    // 注册
    components: {
        mavonEditor,
    },
    data() {
        return {
            content:'', // 输入的markdown
            html:'',    // 及时转的html
        }
    },
    methods: {
        // 所有操作都会被解析重新渲染
        change(value, render){
            // render 为 markdown 解析后的结果[html]
            this.html = render;
        },
        // 提交
        submit(){
            console.log(this.content);
            console.log(this.html);
        }
    },
    mounted() {

    }
}