当前位置：个人在线分享 > SpringBoot,前端html5 整合WangEditor5富文本编辑器,并自定义图片、视频上传至FTP服务器

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

作者 : admin 本文共6512个字，预计阅读时间需要17分钟 发布时间： 2024-06-17 共1人阅读

一：引入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}" />

<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.wangEditor
const 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
// 最多可上传几个文件，默认为 100
maxNumberOfFiles: 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',
// 单个文件的最大体积限制，默认为 10M
maxFileSize: 5 * 1024 * 1024, // 5M
// 最多可上传几个文件，默认为 5
maxNumberOfFiles: 3,
// 选择文件时的类型限制，默认为 ['video/*'] 。如不想限制，则设置为 []
allowedFileTypes: ['video/*'],
// 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
meta: sys_qm({
}),
headers: {
'X-Token':Data.windowGet("User-Token"),
},
// 将 meta 拼接到 url 参数中，默认 false
metaWithUrl: false,
// 自定义增加 http  header
// 跨域是否传递 cookie ，默认为 false
withCredentials: 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;
@Component
public 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 );
}
}

五：实现截图

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

六：总结

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

本站无任何商业行为
个人在线分享 » SpringBoot,前端html5 整合WangEditor5富文本编辑器,并自定义图片、视频上传至FTP服务器
admin

admin 钻石

分享到：

相关推荐

E-->