vue markdown编辑器

<template>
  <div>
    <mavon-editor v-model="content" @change="handleChange" />
  </div>
</template>

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

export default {
  components: {
    mavonEditor
  },
  data() {
    return {
      content: '# Welcome to Vue Markdown Editor\nThis is a demo.'
    }
  },
  methods: {
    handleChange(value, render) {
      // value 是用户输入的 Markdown 内容
      // render 是将 Markdown 转换为 HTML 的结果
      console.log('Markdown content:', value)
      console.log('Rendered HTML:', render)
    }
  }
}
</script>

<style scoped>
/* 自定义样式 */
</style>

解释说明

1. 模板部分 (<template>):

   • 使用了 mavon-editor 组件，并将其绑定到 v-model，以便双向绑定编辑器的内容。
   • 当内容发生变化时，触发 @change 事件并调用 handleChange 方法。

2. 脚本部分 (<script>):

   • 引入了 mavonEditor 组件，并在 components 中注册。
   • 在 data 中初始化了一个 content 变量，用于存储 Markdown 编辑器中的内容。
   • 定义了 handleChange 方法，该方法会在编辑器内容变化时被调用，并输出当前的 Markdown 内容和渲染后的 HTML。

3. 样式部分 (<style scoped>):

   • 这里留空，可以根据需要添加自定义样式。

这个示例展示了如何在 Vue.js 中使用 mavon-editor 创建一个简单的 Markdown 编辑器。