vue3 使用 vditor

1.安装

npm install vditor --save

2.使用

2.1在<template> 标签内创建一个div

<div ref="editorRef"></div>

2.2 在<script>标签里引入js和css文件

import { onMounted, onBeforeUnmount, ref, watch, nextTick } from 'vue'
import Vditor from 'vditor'
import 'vditor/dist/index.css'

2.3.初始化代码

export default {
  name: 'vditorEdit',
  props: {
    content: {
      type: String,
      default: 'Vditor Init OK'
    }
  },
  setup (props) {
    const editorRef = ref()
    let instance
    // 初始化 方法
    function init () {
      instance = new Vditor(editorRef.value, {
        height: 720,
        mode: 'sv',
        toolbarConfig: {
          pin: true
        },
        cache: {
          enable: false
        },
        after: () => {
          instance.setValue(props.content)
        },
        // 这里写上传
        upload: {
        }
      })
    }
    // 监听传进来的值,set到编辑器里
    watch(
      () => props.content,
      (content) => {
        if (instance) {
          instance.setValue(content)
        }
      },
      {
        immediate: true
      }
    )
    // 初始化编辑器
    onMounted(() => {
      nextTick(() => {
        init()
      })
    })
    // 销毁
    onBeforeUnmount(() => {
      instance.destroy()
      instance = null
    })
    // 获取编辑器内容
    function getEditValue () {
      return instance.getValue()
    }

    return {
      editorRef,
      getEditValue
    }
  }
}

4.完整代码：

真正开发的时候，为了复用，会将vditor封装成一个组件，这样就能在项目其他地方调用，防止写重复的代码
gitee-vditor