简介

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

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

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>