vue3-vditor一款优秀的markdown编辑器

vditor使用
在Vue 3中使用Vditor作为Markdown编辑器，你需要先安装Vditor，然后在你的组件中引入并使用它。以下是基本的步骤：

安装Vditor： 在你的Vue项目中，运行以下命令来安装Vditor：
npm install vditor --save
2. 在组件中使用Vditor： 在你的Vue组件中，你可以这样使用Vditor：

<template>
  <div id="vditor"></div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import Vditor from 'vditor';
import 'vditor/dist/index.css';

const vditor = ref(null);

onMounted(() => {
  vditor.value = new Vditor('vditor', {
    height: '50vh',
    width: '50vw',
    toolbarConfig: {
      pin: true,
    },
    cache: {
      enable: false,
    },
    after: () => {
      vditor.value.setValue('hello, Vditor + Vue!');
    },
  });
});
</script>

这段代码会在组件挂载后创建一个新的Vditor实例，并将其附加到ID为vditor的DOM元素上。你可以通过vditor.value来访问Vditor实例并进行操作。 3. 配置选项： Vditor提供了许多配置选项，例如设置编辑器的高度、宽度、工具栏配置等。你可以在创建Vditor实例时通过第二个参数传入配置对象来自定义这些选项。 4. 获取和设置内容： 你可以通过Vditor实例的getValue()方法来获取编辑器中的Markdown内容，通过setValue()方法来设置编辑器的内容。 5. 事件监听： Vditor还提供了一些事件监听的回调函数，例如input、focus和blur，你可以在配置对象中添加这些回调函数来响应用户的操作。 6. 样式和代码高亮： Vditor默认提供了一些样式，你可以通过index.css来引入这些样式。对于代码高亮，Vditor内置了对highlight.js的支持，你可以在配置中设置hljs选项来启用代码高亮。 7. 销毁编辑器： 当组件销毁时，你应该销毁Vditor实例以释放资源，可以通过vditor.value.destroy()来实现。

以上步骤提供了一个基本的指南，如何在Vue 3中集成Vditor作为Markdown编辑器。你可以根据自己的需求进行更多的定制和优化。