一个vue3引入Vditor的例子
## 简介 一个简单的例子,如果以后需要用,可以来这找来看看。(`TypeScript`环境) 万一
渲染中...
## 简介
一个简单的例子,如果以后需要用,可以来这找来看看。(`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>
```END
评论
登录后查看和发表评论
前往登录