当前位置：首页 > 综合服务 > 培训机构 > SpringBoot,前端html5 整合WangEditor5富文本编辑器,并自定义图片、视频上传至FTP服务器

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

时间：2024-04-16 19:35:37 来源：网络cs 作者：利杜鹃栏目：培训机构阅读：

一：引入css以及js

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

<!-- 引入 css --><link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet"><!-- 引入 js --><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}" /><!--<link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet">--><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 src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>--><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 );    }}

五：实现截图

在这里插入图片描述

六：总结

WangEditor 自带的文件上传（官网支持多个上传）功能未实现~~，报错在于index.js中，没深究其原因，希望实现的大佬刷到此文章踢我一脚

本文链接：https://www.kjpai.cn/news/2024-04-16/159603.html，文章来源：网络cs，作者：利杜鹃，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！

上一篇：20240404 每日AI必读资讯

下一篇：返回列表

跨境派