一个vue3引入Vditor的例子

## 简介

一个简单的例子，如果以后需要用，可以来这找来看看。（`TypeScript`环境）

万一以后需要用到，可以来这里找找，CV（`Ctrl C + Ctrl V`）编程大法好。

<!-- more -->

## package.json

- 引入依赖：`npm install vditor`，本文编写时最新版是 `3.9.8`。

```json
  "dependencies": {
    "vditor": "3.9.8",
  },
```

## main.ts

- 引入样式

```typescript
import "vditor/src/assets/less/index.less"
```

## 使用

- 创建编辑器并配置一些东西

```html
<script setup lang="ts">
import Vditor from 'vditor'
import { onMounted } from 'vue'
let vditor: Vditor;

onMounted(() => {
  vditor = new Vditor('vditor', {
    // 规定编辑器总高度，如果不设置，高度将自适应，页面比较难看
    // 需要根据实际情况自己修改它
    height: 500,
    width: '100%',
    lang: 'zh_CN',
    mode: 'sv',
    toolbarConfig: {
      pin: true,
    },
    cache: {
      enable: false,
    },
    after: () => {
      // 编辑器启动后，直接插入一段`Hello`，正式使用视情况修改
      vditor.setValue('hello, Vditor + Vue!')
    },
  })
})
</script>

<template>
  <!-- 编辑器的容器，注意id要和 new Vditor 绑定的值一致-->
  <div id="vditor">
  </div>
</template>

<style scoped>
</style>

```