【Vue】Vue 中引入 MarkDown 编辑器

MarkDown：目前应用非常广泛的文本编辑器，应用于各类博客网站编辑中

参考 github 链接：https://github.com/hinesboy/mavonEditor

---

效果如下：

1、安装

npm install mavon-editor --save

2、引入 & 配置

在要使用 MarkDown 组件的实例中引入

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

3、使用

• 将编辑内容进行双向绑定 v-model="content"
• 实时改变内容：将 MarkDown 实时转化为 html

<template>
  <div>
    <mavon-editor v-model="content" ref="md" @change="change" style="min-height: 600px" />

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

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

  }
}
</script>