vue3 如何使用vidtor这个markdown组件

Vue3中使用Vditor这个Markdown编辑器组件通常需要以下几个步骤：

1. **安装依赖**：
首先，你需要通过npm或yarn将Vditor添加到项目中。运行命令行：

   npm install veditor --save // 或者
   yarn add veditor

2. **引入组件**：
在你的Vue组件里，通常在`<template>`部分导入并注册Vditor组件：

   <script setup>
     import Vditor from 'veditor';
   </script>

   <template>
     <v-editor ref="vEditor"></v-editor> <!-- 使用ref以便于后续操作 -->
   </template>

3. **初始化组件**：
在组件的生命周期钩子（如`setup()`或`mounted()`）中，初始化Vditor实例，并设置其配置：

   const vEditor = ref(null);

   onMounted(() => {
     if (vEditor.value) {
       vEditor.value.init({
         markdown: true, // 开启Markdown模式
         syncScrolling: true, // 同步滚动
         options: { ... } // 可自定义其他选项，如主题、快捷键等
       });
     }
   });

4. **事件监听**：
Vditor提供了一些内置事件，例如内容改变时可以监听`contentChange`：

   vEditor.value.on('contentChange', (content) => {
     console.log('Content changed:', content);
   });

5. **使用组件**：
现在你可以直接在模板中使用Vditor了，用户输入的Markdown文本会在组件内实时渲染。