vue3中使用md-editor-v3.js实现md文件的预览和编辑

在Vue 3中使用md-editor-v3实现Markdown文件的预览和编辑，你需要先安装md-editor-v3：

npm install md-editor-v3 --save

然后在你的Vue组件中引入并使用它：

<template>
  <div>
    <md-editor v-model="markdown" />
    <div v-html="compiledMarkdown"></div>
  </div>
</template>
 
<script>
import { ref } from 'vue';
import { marked } from 'marked';
import { MdEditor } from 'md-editor-v3';
import 'md-editor-v3/lib/md-editor-v3.css';
 
export default {
  components: {
    MdEditor
  },
  setup() {
    const markdown = ref('');
    const compiledMarkdown = ref('');
 
    // 使用marked库将Markdown转换为HTML字符串
    marked.setOptions({
      renderer: new marked.Renderer(),
      gfm: true,
      tables: true,
      breaks: false,
      pedantic: false,
      sanitize: false,
      smartLists: true,
      smartypants: false,
      highlight: function(code) {
        return hljs.highlightAuto(code).value;
      }
    });
 
    // 监听markdown变化，实时更新HTML预览
    watch(markdown, (newValue) => {
      compiledMarkdown.value = marked(newValue);
    });
 
    return {
      markdown,
      compiledMarkdown
    };
  }
};
</script>
 
<style>
/* 你可以添加自定义样式 */
</style>

在这个例子中，我们创建了一个Vue 3组件，其中包含了md-editor-v3以进行Markdown的编辑，并使用了marked库来将Markdown转换为HTML，以便进行预览。我们还使用了Vue的ref来创建响应式数据，并通过watch来监听编辑器中的变化，实时更新预览的HTML。