1. 依赖

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

2. 在template使用wangEditor 5

• v-model数据库中查询出来的editor中的数据，数据库中使用longtext类型

 <Toolbarstyle="border-bottom: 1px solid #ccc":editor="editorRef":mode="mode"/><Editorstyle="height: 500px; overflow-y: hidden;"v-model="content" :mode="mode":defaultConfig="editorConfig"@onCreated="handleCreated"/>

3. js代码

• customInsert：这个配置的作用，发送图片到接口返回的只有图片的文件名，但是要在editor中显示图片需要图片完整的url，这里就是把url补完整

import '@wangeditor/editor/dist/css/style.css' // 引入 css
import {onBeforeUnmount, reactive, shallowRef} from "vue";
import {Editor, Toolbar} from '@wangeditor/editor-for-vue'
/* wangEditor5 初始化开始 */
const editorRef = shallowRef()  // 编辑器实例，必须用 shallowRef
const mode = 'default'
const editorConfig = {MENU_CONF: {}}
// 图片上传配置
editorConfig.MENU_CONF['uploadImage'] = {headers: {token: '',	},server: import.meta.env.VITE_BASE_API + "/avatar/wang/upload",  // 服务端图片上传接口fieldName: 'file',  // 服务端图片上传接口参数名// 后端返回的图片地址不是完整的，可以在这里补全customInsert: (res, insertFn) => {const baseUrl = import.meta.env.VITE_BASE_API ; // 你要添加的前缀字符串const imageUrl = res.data[0].url;const newImageUrl = baseUrl + imageUrl;insertFn(newImageUrl);},
}
// 组件销毁时，也及时销毁编辑器，否则可能会造成内存泄漏
onBeforeUnmount(() => {const editor = editorRef.valueif (editor == null) returneditor.destroy()
})
// 记录 editor 实例，重要！
const handleCreated = (editor) => {editorRef.value = editor
}

4. 后端接口

// 下载@RequestMapping("/download/{imgPath}")public void download(@PathVariable("imgPath") String fileName, HttpServletResponse response) {String UPLOAD_PATH = System.getProperty("user.dir") + "/avatar/" + fileName;FileUtilCustom.downloadFile(UPLOAD_PATH, response);}// wangeditor 指定的上传，返回值比较特殊@PostMapping("/wang/upload")public Map<String, Object> wangEditorUpload(MultipartFile file) {String UPLOAD_PATH = System.getProperty("user.dir") + "/avatar/";String fileName = FileUtilCustom.uploadFile(file, UPLOAD_PATH);Map<String, Object> resMap = new HashMap<>();// wangEditor上传图片成功后， 需要返回的参数resMap.put("errno", 0);resMap.put("data", CollUtil.newArrayList(Dict.create().set("url", "/avatar/download/" +  fileName)));return resMap;}

接口中调用的上传和下载的方法

// 自己写的上传和下载，还需要再优化
import cn.hutool.core.io.FileUtil;
import com.example.exception.CustomException;
import jakarta.servlet.http.HttpServletResponse;
import org.springframework.web.multipart.MultipartFile;import java.io.OutputStream;
import java.net.URLEncoder;
import java.nio.charset.StandardCharsets;
import java.util.UUID;public class FileUtilCustom {/*** 文件上传，将文件file放到指定的filePath位置* @param file 文件* @param filePath 保存文件的绝对路径* @return  文件名* @throws CustomException 自定义异常，文件上传失败*/public static String uploadFile(MultipartFile file, String filePath) {if (file.isEmpty()) {return "文件为空";}if (!FileUtil.isDirectory(filePath)) {FileUtil.mkdir(filePath);}try {// 截取UUID的前10位，防止文件名重复String fileName = UUID.randomUUID().toString().substring(0,10)+'_' + file.getOriginalFilename();FileUtil.writeBytes(file.getBytes(), filePath + fileName);return fileName;	// 上传成功后只返回文件名}catch (Exception e){throw new CustomException("文件上传失败");}}/*** 文件下载* @param filePath  文件的绝对路径* @param response  响应* @throws CustomException 自定义异常，文件不存在，文件下载失败*/public static void downloadFile(String filePath, HttpServletResponse response) {if (!FileUtil.exist(filePath)) {throw new CustomException("文件不存在");}try {String fileName = FileUtil.getName(filePath);// 文件名可能包含中文对文件名进行编码String encodeName =URLEncoder.encode(fileName, StandardCharsets.UTF_8);// 设置响应头，需要在跨域设置中，设置"Content-Disposition"response.setHeader("Content-Disposition", "attachment'filename=" + encodeName );response.setContentType("application/octet-stream");OutputStream outputStream = response.getOutputStream();FileUtil.writeToStream(filePath, outputStream);outputStream.close();}catch (Exception e){throw new CustomException("文件下载失败");}}
}