核心代码
urlconverter_callback: function(url, node, on_save, name) {if (node === 'img' && url.startsWith('blob:')) {tinymce.activeEditor && tinymce.activeEditor.uploadImages()}return url;},
该代码的具体所在位置
data() {return {//初始化配置init: {//menubar: true, // 菜单栏显隐//language_url: "@/components/tinymce/langs/zh_CN.js",language_url: '../static/tinymce/langs/zh_CN.js', // vue-cli2.xlanguage: "zh_CN",//skin_url: "@/components/tinymce/skins/ui/oxide",skin_url: '../static/tinymce/skins/ui/oxide', // vue-cli2.xcontent_css: 'src/assets/fonts/FZHei.css,src/assets/fonts/FZXBSJW.css',// vue-cli2.xheight: 630,min_height: 570,max_height: 970,toolbar_mode: "wrap",plugins: this.plugins,toolbar: this.toolbar,pasteAsPlainText: true,content_style: "p {margin: 5px 0;} img {max-width:100%;}",fontsize_formats: "12px 14px 16px 18px 24px 36px 48px 56px 72px",font_formats:"微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;小标宋=FZXiaoBiaoSong;方正黑体=FZHei,sans-serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;",branding: false,paste_data_images: true,// 粘贴图片后自动上传urlconverter_callback: function(url, node, on_save, name) {if (node === 'img' && url.startsWith('blob:')) {tinymce.activeEditor && tinymce.activeEditor.uploadImages()}return url;},// 图片上传images_upload_handler: (blobInfo, success, failure) => {// const img = 'data:image/jpeg;base64,' + blobInfo.base64()// success(img)const formData = new FormData()formData.append('file', blobInfo.blob())formData.append('biz', 'rich')let url = config.configData.api_url + "/sys/common/uploadA";utils.httpFile(url,formData).then((res) => {console.log('===============',res.data);let filePath = res.data.result.file;success(filePath);})}},content: this.value};},
实现上传的前端代码
// 图片上传images_upload_handler: (blobInfo, success, failure) => {// const img = 'data:image/jpeg;base64,' + blobInfo.base64()// success(img)const formData = new FormData()formData.append('file', blobInfo.blob())formData.append('biz', 'rich')let url = config.configData.api_url + "/sys/common/uploadA";utils.httpFile(url,formData).then((res) => {console.log('===============',res.data);let filePath = res.data.result.file;success(filePath);})}
java后端代码
@RequestMapping(value = "/upFiles", method = RequestMethod.POST)public Result<?> upFiles(HttpServletRequest request, HttpServletResponse response) {MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;String fileType = request.getParameter("fileType");List<String> result = new ArrayList<>();Map<String, MultipartFile> fileMap = multipartRequest.getFileMap();for (Map.Entry<String, MultipartFile> entity : fileMap.entrySet()) {MultipartFile file = entity.getValue();// 获取上传文件对象try {String fileName = file.getOriginalFilename();String newFile = "";String path = uploadpath + "/" + fileType;if (fileName.equals("blob")) {newFile = UUID.randomUUID().toString().replace("-", "") + ".png";} else {String extName = fileName.substring(fileName.lastIndexOf("."));newFile = UUID.randomUUID().toString().replace("-", "") + extName;}File dest = new File(new File(path).getAbsolutePath()+ "/" + newFile);File dir = new File(path);if (!dir.exists()) {dir.mkdirs();}file.transferTo(dest); // 保存文件result.add(fileType + File.separator + newFile);} catch (Exception e) {return Result.error("文件导入失败:" + e.getMessage());}}if (result.size() > 0) {return Result.OK(result);} else {return Result.error("文件导入失败!");}}