JAVA全系列 教程
3762个小节阅读:7089.7k
目录
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本,未来主流的版本
人工智能 教程
顺势而为,AI创新未来
大厂算法 教程
算法,程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
在编写产品详情时,往往需要加入一些文字样式或者插入图片,这样最终给用户展示出来的效果会更好。
要想在插入内容时拥有样式,需要使用富文本编辑器。在项目中,我们使用中国人开发的一个富文本编辑器——wangEditor,官网地址:https://www.wangeditor.com/
在前端页面中引入wangEditor.js
在页面中加入wangEditor
插件
xxxxxxxxxx
<div class="col-md-10 data" style="height: 350px">
<div id="div1"></div>
<textarea id="text1" style="width:100%; height:100px;" name="productDesc" hidden></textarea>
<script>
const E = window.wangEditor;
const editor = new E('#div1');
const $text1 = $('#text1');
editor.customConfig.onchange = function (html) {
// 第二步,监控变化,同步更新到 textarea
$text1.val(html)
}
// 配置所有菜单
editor.customConfig.menus = [
'head', // 标题
'bold', // 粗体
'fontSize', // 字号
'fontName', // 字体
'italic', // 斜体
'underline', // 下划线
'foreColor', // 文字颜色
'backColor', // 背景颜色
'justify', // 对齐方式
'image', // 插入图片
'undo', // 撤销
]
// 配置服务器上传地址
editor.customConfig.uploadImgServer = '/backstage/product/upload';
// 配置上传图片的参数名
editor.customConfig.uploadFileName = "file";
editor.create();
// 第一步,初始化 textarea 的值
$text1.val(editor.txt.html());
</script>
</div>
编写上传控制器,接收富文本编辑器上传的图片
xxxxxxxxxx
@RequestMapping(value = "/upload")
@ResponseBody
public WangEditorResult upload(HttpServletRequest request, MultipartFile file) throws Exception {
// 创建文件夹,存放上传文件。
//1.设置上传文件夹的真实路径
String realPath = ResourceUtils.getURL("classpath:").getPath()+"/static/upload/";;
//2.判断该文件夹是否存在,如果不存在,新建文件夹
File dir = new File(realPath);
if (!dir.exists()){
dir.mkdirs();
}
// 拿到上传文件名
String filename = file.getOriginalFilename();
filename = UUID.randomUUID()+filename;
// 创建空文件
File newFile = new File(dir, filename);
// 将上传的文件写到空文件中
file.transferTo(newFile);
WangEditorResult wangEditorResult = new WangEditorResult();
String[] data = {"/upload/"+filename};
wangEditorResult.setErrno(0);
wangEditorResult.setData(data);
return wangEditorResult;
}
wangEditor要求上传图片的返回值必须按照它的要求,所以我们创建一个实体类,用于返回上传的结果。
xxxxxxxxxx
@Data
public class WangEditorResult {
private int errno;
private String[] data;
}
在yml中配置上传文件的大小
xxxxxxxxxx
# 上传文件
spring:
servlet:
multipart:
max-file-size: 10MB # 最大单个文件
max-request-size: 10MB # 一次请求最大上传