Vue3后台管理系统wangEditor富文本编辑器

在Vue 3中使用wangEditor富文本编辑器，首先需要安装wangEditor：

npm install wangeditor --save

然后在Vue组件中引入并使用wangEditor创建富文本编辑器：

<template>
  <div ref="editor"></div>
</template>
 
<script setup>
import { onMounted, ref } from 'vue';
import E from 'wangeditor';
 
const editor = ref(null);
 
onMounted(() => {
  const editorInstance = new E(editor.value);
  editorInstance.customConfig.onchange = (html) => {
    // 内容改变时的回调
    console.log(html); // 打印内容
  };
  editorInstance.customConfig.uploadImgServer = '你的图片上传服务器地址'; // 配置图片上传功能
  editorInstance.customConfig.uploadFileName = '你的文件字段名';
  editorInstance.customConfig.uploadImgMaxSize = 3 * 1024 * 1024; // 将图片大小限制为3M
  editorInstance.customConfig.uploadImgMaxLength = 6; // 限制一次最多上传 6 张图片
  editorInstance.customConfig.uploadImgTimeout = 3 * 60 * 1000; // 设置超时时间
 
  // 创建编辑器
  editorInstance.create();
});
</script>

这段代码演示了如何在Vue 3组件中引入并初始化wangEditor，并设置了图片上传的服务器地址、字段名、大小和数量的限制。记得替换上传服务器地址和字段名为你实际的服务器信息。