Vue - Vue3 集成编辑器功能

1、安装依赖

编辑器插件需要安装 @wangeditor/editor 和 @wangeditor/editor-for-vue 两个插件

npm install @wangeditor/editor --save

vue3运行如下命令安装

npm install @wangeditor/editor-for-vue@next --save

vue2运行如下命令安装

npm install @wangeditor/editor-for-vue --save

安装后可在 Vue 项目的 package.json 中查看安装依赖项

2、插件使用

本文章针对 Vue3 项目，在 Vue 组件中使用方式如下：

<script setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import {
     DomEditor} from '@wangeditor/editor'
import {
     computed, onBeforeUnmount, ref, shallowRef} from 'vue'
import {
     Editor, Toolbar} from '@wangeditor/editor-for-vue'

const emit = defineEmits(["update:modelValue"])
const props = defineProps({
     
  modelValue: {
     
    type: String,
    default: ''
  },
  placeholder: {
     
    type: String,
    default: '请输入...'
  }
})
const inputValue = computed({
     
  get() {
     
    return props.modelValue
  },
  set(value) {
     
    emit("update:modelValue", value)
  }
})
// 编辑器实例，必须用