【Vue】Vue 中引入 MarkDown 编辑器_vue 封装组件 markdown-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42678675/article/details/104608433

本文介绍了一款流行的Markdown编辑器MavonEditor，详细阐述了其在博客网站编辑中的应用，包括安装、配置与使用方法，以及如何将Markdown内容实时转化为HTML。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>