vditor: ♏ 一款浏览器端的 Markdown 编辑器，支持所见即所得（富文本）、即时渲染（类似 Typora）和分屏预览模式。An In-browser Markdown editor, support WYSIWYG (Rich Text), Instant Rendering (Typora-like) and Split View modes.

社区

  • https://b3log.org/vditor/

vditor使用

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

  1. 安装Vditor：

在你的Vue项目中，运行以下命令来安装Vditor：

npm install vditor --save
  1. 在组件中使用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实例并进行操作。

  1. 配置选项：

Vditor提供了许多配置选项，例如设置编辑器的高度、宽度、工具栏配置等。你可以在创建Vditor实例时通过第二个参数传入配置对象来自定义这些选项。

  1. 获取和设置内容：

你可以通过Vditor实例的getValue()方法来获取编辑器中的Markdown内容，通过setValue()方法来设置编辑器的内容。

  1. 事件监听：

Vditor还提供了一些事件监听的回调函数，例如input、focus和blur，你可以在配置对象中添加这些回调函数来响应用户的操作。

  1. 样式和代码高亮：

Vditor默认提供了一些样式，你可以通过index.css来引入这些样式。对于代码高亮，Vditor内置了对highlight.js的支持，你可以在配置中设置hljs选项来启用代码高亮。

  1. 销毁编辑器：

当组件销毁时，你应该销毁Vditor实例以释放资源，可以通过vditor.value.destroy()来实现。

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