SpringBoot,前端html5 整合WangEditor5富文本编辑器,并自定义图片、视频上传至FTP服务器

温酒斩化藤 2024-06-13 15:33:03 阅读 96

一：引入css以及js

WangEditor5 官网 https://www.wangeditor.com/

<link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet"><script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>

推荐下载到本地引入，有时候发现CDN 访问不成功。

二：H5前端整合编辑器

这里遇到的坑：原生的图片和视频上传，不懂为什么配置多个上传参数无效（即maxNumberOfFiles参数），配置成多个后台也只能接收到一个，返回参数即使按照官网所需，上传第二个的时候js就报错了。所以这里直接用自定义方法上传了，后台只需返回图片或视频URL即可。

有发现并解决这个问题的伙伴麻烦解答一下~

<!DOCTYPE html><html lang="zh-cn" xmlns:th="http://www.thymeleaf.org"><head th:include="template/head_template::commonHead"></head><link rel="stylesheet" th:href="@{/js/Wangeditor/style.css}" /><style>.dropdown-menu{ min-width: 240px;}#editor—wrapper { border: 1px solid #ccc;z-index: 100; /* 按需定义 */}#toolbar-container { border-bottom: 1px solid #ccc; }#editor-container { min-height: 450px; }</style><body><form id="wd_main_InfoTable" action="" style="overflow-x:hidden;" > <textarea id="ueedit" name="ueedit" hidden ></textarea><div id="editor—wrapper" ><div id="toolbar-container"></div><div id="editor-container"></div></div></form><script th:src="@{/js/Wangeditor/index.js}"></script><script>var ctxPath=Data.windowGet("ctxPath");var editor ;function init_editor(editor_html) { //配置项const { createEditor, createToolbar} = window.wangEditorconst editorConfig = { MENU_CONF: { },placeholder: '请编写...',onChange(editor) { const html = editor.getHtml();//const html = editor.getHtml();$('#ueedit').html(html);}}//上传图片editorConfig.MENU_CONF['uploadImage'] = { server: ctxPath+'/api/business/wangeditor/upload',fieldName: 'file',maxFileSize: 2 * 1024 * 1024, // 1M// 最多可上传几个文件，默认为 100maxNumberOfFiles: 5,allowedFileTypes: ['image/*'],meta: sys_qm({ }),headers: { 'X-Token':Data.windowGet("User-Token"),},// 单个文件上传失败onFailed(file, res) { console.log('上传失败', res)},//重写上传图片方法async customUpload(file, insertFn) { let formData = new FormData();formData.append('file', file);$.ajax({ url: ctxPath+'/api/business/wangeditor/upload', //设置后台接收图片的URL地址type: 'POST',dataType: 'json',data: formData,processData: false,contentType: false,success: function (res) { console.log(res);if(res.code=='200'){ insertFn(res.data.url, "", "");}},error: function () { console.error('上传失败');}});},customInsert(res, insertFn) { // JS 语法// res 即服务端的返回结果console.log(res);// 从 res 中找到 url alt href ，然后插入图片//insertFn(url, alt, href)},}editorConfig.MENU_CONF['uploadVideo'] = { // form-data fieldName ，默认值 'wangeditor-uploaded-video'fieldName: 'file',// 单个文件的最大体积限制，默认为 10MmaxFileSize: 5 * 1024 * 1024, // 5M// 最多可上传几个文件，默认为 5maxNumberOfFiles: 3,// 选择文件时的类型限制，默认为 ['video/*'] 。如不想限制，则设置为 []allowedFileTypes: ['video/*'],// 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。meta: sys_qm({ }),headers: { 'X-Token':Data.windowGet("User-Token"),},// 将 meta 拼接到 url 参数中，默认 falsemetaWithUrl: false,// 自定义增加 http header// 跨域是否传递 cookie ，默认为 falsewithCredentials: true,// 超时时间，默认为 30 秒timeout: 15 * 1000, // 15 秒// 视频不支持 base64 格式插入//重写上传视频方法async customUpload(file, insertFn) { let formData = new FormData();formData.append('file', file);$.ajax({ url: ctxPath+'/api/business/wangeditor/upload', //设置后台接收视频的URL地址type: 'POST',dataType: 'json',data: formData,processData: false,contentType: false,success: function (res) { if(res.code=='200'){ insertFn(res.data.url, "")}},error: function () { console.error('上传失败');}});},}editor = createEditor({ selector: '#editor-container',html: editor_html,//预置内容config: editorConfig,mode: 'default', // or 'simple'})const toolbarConfig = { }const toolbar = createToolbar({ editor,selector: '#toolbar-container',config: toolbarConfig,uploadVideoShow: false,mode: 'default', // or 'simple'})}function init(){ var html = ``;//这里可以取数据库存的html直接生成预置内容init_editor(html);}init();</script></body></html>

三：后台接收并保存文件至本地以及FTP

我这里是因为工作的需求文件才放到FTP，没必要的直接存本地即可。

package com.txy.modules.business.Wangeditor;import com.txy.modules.common.dto.output.ApiResult;import com.txy.modules.common.entity.Attachment;import com.txy.utils.ftp.FtpUtil;import com.txy.utils.spring.SpringUtil;import io.swagger.annotations.Api;import io.swagger.annotations.ApiOperation;import io.swagger.annotations.ApiParam;import org.apache.logging.log4j.util.PropertiesUtil;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.boot.configurationprocessor.json.JSONArray;import org.springframework.boot.configurationprocessor.json.JSONException;import org.springframework.boot.configurationprocessor.json.JSONObject;import org.springframework.web.bind.annotation.*;import org.springframework.web.multipart.MultipartFile;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.io.File;import java.io.FileOutputStream;import java.io.IOException;import java.time.LocalDateTime;import java.util.HashMap;import java.util.List;import java.util.Map;import java.util.UUID;@RestController@RequestMapping("api/business/wangeditor")@Api(value = "wangeditor后台配置")public class WangEditorController { private String basicLocation = "D:\\images\\"; @Autowired private FtpUtil ftpUtil; @ResponseBody @PostMapping("/upload") @ApiOperation("上传图片") public ApiResult<Object> save_main(HttpServletRequest request, HttpServletResponse response, @RequestPart("file") MultipartFile file, @ApiParam("com.zhoukai.modules.common.dto.input.validate.CommonParamsInput")String params) throws IOException, JSONException { String suffix = ""; String originalFilename = file.getOriginalFilename(); String uuid = UUID.randomUUID().toString(); if (originalFilename.contains(".")) { suffix = originalFilename.substring(originalFilename.lastIndexOf(".")); } String fileName=uuid+suffix; File fileSave = new File(basicLocation ,fileName); if (!fileSave.getParentFile().exists()) { fileSave.getParentFile().mkdirs(); } FileOutputStream fos = null; try { fos = new FileOutputStream(fileSave); fos.write(file.getBytes()); } catch (Exception e) { e.printStackTrace(); } finally { try { fos.close(); } catch (IOException e) { e.printStackTrace(); } } //接着上传到FTP文件服务器上面这里用了Hutool工具库实现方法就不粘贴出来了 ftpUtil.upload("wangEditor", fileName, fileSave); Map<String,Object> map = new HashMap(); map.put("status",0); map.put("url","http://192.168.0.219:2233/wangEditor/"+fileName); return ApiResult.success(map); }}

四：配置文件，通过url访问本地的图片

package com.zhoukai.modules.business.editor;import org.springframework.stereotype.Component;import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;@Componentpublic class PhotoUtils implements WebMvcConfigurer { @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { /** * 访问路径：http://localhost:2233/images/test.jpg * "/image/**" 为前端URL访问路径 * "file:" + bmpPath 是本地磁盘映射 */ String bmpPath = "D:\\images\\"; registry.addResourceHandler("/images/**").addResourceLocations("file:"+bmpPath ); }}