java 接收前台富文本_前后端分离ueditor富文本编辑器的使用-Java版本
最近在写一个自己的后台管理系统(主要是写着玩的,用来熟悉后端java的知识,目前只是会简单的写点接口),想在项目中编写一个发布新闻文章的功能,想到了使用百度的ueditor富文本编辑器,网上找了很多java版本的资料,不过大部分都是前后端都在一个工程项目下,页面是jsp的。由于我这个系统是把前后端拆分开成前后端分离的。所以在根据看了网上的资料以及慢慢的摸索下,实现了在前后端分离的情况下把ueditor集成到系统中。项目页面如图:
说明:由于ueditor的上传文件的功能默认是上传在项目工程目录下的,而我这里是把文件上传到另外一个Tomcat服务器下的,所以我自己单独写了一个上传接口,并且还要修改config.json文件。
现在为了记录ueditor的使用,我在这里把有关ueditor这一块单独拿出来,写了一个简单的小demo,下面记录过程,如有不足之处,敬请提出。
1、下载ueditor
需要下载两个压缩包
1、下载完整源码,并解压
2、下载jsp版本【UTF-8】,并解压
源码版本是为了使用里面的java文件,而后来发现在源码版本中没有ueditor.all.min.js文件,而在前端是需要引入这个js文件的,所以需要再把jsp版本下载下来,该版本中有该js文件。
2、java后台部分
2.1、config.json文件
在java项目的 src/main/webapp 目录下新建一个conf目录,然后在解压后的源码版本中的 jsp 目录下找到config.json文件,把它复制到新建的conf目录下,并做修改。
该文件是用来配置ueditor编辑器的上传文件的功能的各种参数的。
其中,imageActionName属性的取值“uploadimage”要记住,后续上传接口中要用到
2.2、把源码版本中的 jsp/src/com 目录下的 baidu 这个文件夹拷贝到项目com.lin包下
拷贝后,里面java文件肯定会报错,只需修改各个java文件的package包路径和引用其他文件的路径即可。
另外由于在上一步中,把config.json文件放置到了src/main/webapp/conf目录下,而在ConfigManager类中需要读取该json文件的内容,所以需要在ConfigManager.java文件中修改少量代码,大于在170多行,修改如下:
2.3、项目常量配置-config.properties
#host地址
host=http://172.16.4.160:8081/ssm_project
#文件上传服务器地址(ip+端口)
uploadHost=http://172.16.4.160:8090/
#普通图片上传保存目录
imagePath= file/image/#系统用户头像上传保存目录
headImgPath= file/image/headImg/#系统用户默认头像
sysUserDefImg= sysUser-default.jpg
#文本文件上传保存目录
documentPath= file/document/#音频文件上传保存目录
soundPath= file/sound/#视频文件上传保存目录
videoPath= file/video/#ueditor编辑器上传文件保存目录(包括图片、视频、音频、文本等文件)
ueditor= file/ueditor/
2.4、新建上传工具类-Upload.java
该文件其实在我11月2号的博客——前后端分离跨服务器文件上传-Java SpringMVC版 中已有,为了方便理解,这里再次把代码贴出来。
packagecom.lin.utils;importjava.io.File;importjava.io.IOException;importjava.text.SimpleDateFormat;importjava.util.Date;importjava.util.UUID;importjavax.servlet.http.HttpServletRequest;importjavax.servlet.http.HttpServletResponse;importorg.apache.commons.io.FilenameUtils;importorg.springframework.web.multipart.MultipartFile;importcom.sun.jersey.api.client.Client;importcom.sun.jersey.api.client.WebResource;/*** 上传文件工具类
*@authorlibo*/
public classUpload {/*** 上传文件
*@paramrequest
*@paramresponse
*@paramserverPath 服务器地址:(http://172.16.5.102:8090/)
*@parampath 文件路径(不包含服务器地址:upload/)
*@return
*/
public staticString upload(Client client, MultipartFile file, HttpServletRequest request,HttpServletResponse response, String serverPath, String path){//文件名称生成策略(日期时间+uuid )
UUID uuid =UUID.randomUUID();
Date d= newDate();
SimpleDateFormat format= new SimpleDateFormat("yyyyMMddHHmmss");
String formatDate=format.format(d);//获取文件的扩展名
String extension =FilenameUtils.getExtension(file.getOriginalFilename());//文件名
String fileName = formatDate + "-" + uuid + "." +extension;//相对路径
String relaPath = path +fileName;
String a= serverPath + path.substring(0, path.lastIndexOf("/"));
File file2= newFile(a);if(!file2.exists()){boolean mkdirs =file2.mkdirs();
System.out.println(mkdirs);
}//另一台tomcat的URL(真实路径)
String realPath = serverPath +relaPath;//设置请求路径
WebResource resource =client.resource(realPath);//发送开始post get put(基于put提交)
try{
resource.put(String.class, file.getBytes());return fileName+";"+relaPath+";"+realPath;
}catch(IOException e) {
e.printStackTrace();return "";
}
}}
2.5、新建UEditorController.java文件,编写上传接口
packagecom.lin.controller;importjava.io.IOException;importjava.io.PrintWriter;importjava.util.Map;importjavax.servlet.http.HttpServletRequest;importjavax.servlet.http.HttpServletResponse;importorg.apache.commons.io.FilenameUtils;importorg.springframework.beans.factory.annotation.Value;importorg.springframework.stereotype.Controller;importorg.springframework.web.bind.annotation.RequestMapping;importorg.springframework.web.bind.annotation.RequestMethod;importorg.springframework.web.bind.annotation.ResponseBody;importorg.springframework.web.multipart.MultipartFile;importorg.springframework.web.multipart.MultipartHttpServletRequest;importorg.springframework.web.multipart.MultipartResolver;importorg.springframework.web.multipart.commons.CommonsMultipartResolver;importcom.lin.baidu.ueditor.ActionEnter;importcom.lin.utils.ResponseUtils;importcom.lin.utils.Upload;importcom.sun.jersey.api.client.Client;importnet.sf.json.JSONObject;/*** baidu-ueditor
*@authorlibo*/@Controller
@RequestMapping("/ueditor")public classUEditorController {
@Value(value="${ueditor}") //后台图片保存地址
privateString ueditor;
@Value(value="${uploadHost}")private String uploadHost; //项目host路径
/*** ueditor文件上传(上传到外部服务器)
*@paramrequest
*@paramresponse
*@paramaction*/@ResponseBody
@RequestMapping(value="/ueditorUpload.do", method={RequestMethod.GET, RequestMethod.POST})public voideditorUpload(HttpServletRequest request, HttpServletResponse response, String action) {
response.setContentType("application/json");
String rootPath= request.getSession().getServletContext().getRealPath("/");try{if("config".equals(action)){ //如果是初始化
String exec = newActionEnter(request, rootPath).exec();
PrintWriter writer=response.getWriter();
writer.write(exec);
writer.flush();
writer.close();
}else if("uploadimage".equals(action) || "uploadvideo".equals(action) || "uploadfile".equals(action)){ //如果是上传图片、视频、和其他文件
try{
MultipartResolver resolver= newCommonsMultipartResolver(request.getSession().getServletContext());
MultipartHttpServletRequest Murequest=resolver.resolveMultipart(request);
Map files = Murequest.getFileMap();//得到文件map对象//实例化一个jersey
Client client = newClient();for(MultipartFile pic: files.values()){
JSONObject jo= newJSONObject();long size = pic.getSize(); //文件大小
String originalFilename = pic.getOriginalFilename(); //原来的文件名
String uploadInfo =Upload.upload(client, pic, request, response, uploadHost, ueditor);if(!"".equals(uploadInfo)){ //如果上传成功
String[] infoList = uploadInfo.split(";");
jo.put("state", "SUCCESS");
jo.put("original", originalFilename);//原来的文件名
jo.put("size", size); //文件大小
jo.put("title", infoList[1]); //随意,代表的是鼠标经过图片时显示的文字
jo.put("type", FilenameUtils.getExtension(pic.getOriginalFilename())); //文件后缀名
jo.put("url", infoList[2]);//这里的url字段表示的是上传后的图片在图片服务器的完整地址(http://ip:端口/***/***/***.jpg)
}else{ //如果上传失败
}
ResponseUtils.renderJson(response, jo.toString());
}
}catch(Exception e) {
e.printStackTrace();
}
}
}catch(Exception e) {
}
}
}
其中:
if("config".equals(action)){
这段代码是用来判断是否是初始化上传的,因为在点击多图上传弹出上传窗口的时候,是会请求这个接口,经测试,如果没有该段判断,前端的上传是无法使用的。
else if("uploadimage".equals(action) || "uploadvideo".equals(action) || "uploadfile".equals(action)){
这一部分代码判断中, uploadimage,uploadvideo,uploadfile 这三个值,都是来自于conf.json文件中的配置,因此这一个接口既可以上传图片,也可以上传其他类型文件。
另外接口返回的json字段,也是固定的。
3、前端部分
3.1、demo目录结构
在ueditor-demo目录下新建lib目录,然后从之前解压的jsp版本中,把dialogs、lang、themes、third-party四个文件夹和ueditor.all.min.js、ueditor.config.js、ueditor.parse.js、ueditor.parse.min.js四个js文件复制到lib目录下,并添加jQuery(用来执行ajax提交数据)
3.2、文件修改
1、修改ueditor.config.js
修改服务器统一请求接口路径 - serverUrl属性的值修改为后台上传文件的接口地址
2、修改dialogs/image/image.js、dialogs/video/video.js、dialogs/attachment/attachment.js三个文件
这三个文件分别对应图片上传、视频上传、附件上传,主要是要去掉默认设置的请求头(可以直接在这三个js文件中删掉该段代码),否则无法上传文件
2.1、dialogs/image/image.js大概在706行
2.2、dialogs/video/video.js大概在719行
2.3、dialogs/attachment/attachment.js大概在488行
3.3、index.html
在页面中需要引入ueditor.config.js、ueditor.all.min.js和zh-cn.js
在body元素中写一个script元素,给一个id,这里为editor,并设置type="text/plain",这个id主要是通过它来初始化ueditor实例的。
初始化的方式是在通过 UE.getEditor('script标签id', {})。
这里有两个参数,第一个参数是script标签的id值,第二个参数是一个对象,可以用来设置ueditor编辑框的宽高等属性,这里只设置了宽高。
ueditor-demo
}
ueditor测试使用
java 接收前台富文本_前后端分离ueditor富文本编辑器的使用-Java版本相关推荐
- 计算机课程设计-基于ssm+vue的物资管理系统(前后端分离)-物资出库入库管理系统java代码
计算机课程设计-基于ssm+vue的物资管理系统(前后端分离)-物资出库入库管理系统java代码 注意:该项目只展示部分功能,如需了解,评论区咨询即可. 作者:IT跃迁谷 1.开发环境 开发语言:Ja ...
- 驾校分期-众筹项目java前后端分离项目vue(微信小程序+java前后端源码下载)
可以idea直接打开,mysql数据库项目,前后端分离项目vue,分期可自动设置,自动换算金额 驾校分期-众筹项目java前后端分离项目vue(微信小程序+java前后端源码下载)
- 若依前后端分离发布富文本框内容 | uni-app微信小程序展示富文本框内容
微信小程序端引入富文本样式 富文本提交图片json error 一.展示示例: 1.PC端前端发布界面 可以设置文字大小,居中,可以插入图片,设置图片大小,居中. 2.小程序端展示 二.基于若依框架踩 ...
- java会员卡的绑定和解绑_前后端分离项目 — SpringSocial 绑定与解绑社交账号如微信、QQ...
1.准备工作 申请QQ.微信相关AppId和AppSecret,这些大家自己到QQ互联和微信开发平台 去申请吧 还有java后台要引入相关的jar包,如下: org.springframework.s ...
- Java项目:网上电商项目(前后端分离+java+vue+Springboot+ssm+mysql+maven+redis)
源码获取:博客首页 "资源" 里下载! 一.项目简述 本系统功能包括: 一款基于Springboot+Vue的电商项目,前后端分离项目,前台后台都有,前台商品展示购买,购物车分类, ...
- elementui 按钮 表单_前后端分离,文件上传下载(springBoot+vue+elementUI)
1.介绍 本文主要是介绍前后端分离的上传下载,后端使用的是SpringBoot,持久层用的是mybatis-plus,前端用的Vue,UI用的elementUI,测试了一下,文本,图片,excel,都 ...
- 若依前后端分离如何写移动端接口_前后端分离架构概述
1.背景 2.未分离时代(各种耦合) 3.半分离时代 4.分离时代 5.总结 <Netty 实现原理与源码解析 -- 精品合集> <Spring 实现原理与源码解析 -- 精品合集& ...
- 若依前后端分离如何写移动端接口_前后端分离实践的架构设计
前后端分离的项目开发策略已经不是什么新鲜东西了,网上介绍这方面的文章非常多.我自己是在14年的时候接触到的,对这种开发策略一直爱不释手,不管新老项目都会首先用前后端分离的思维先去思考一番.从14年到现 ...
- Java项目:前后端分离疫情防疫平台设计和实现(java+springmvc+VUE+node.js+mybatis+mysql+springboot+redis+jsp)
源码获取:博客首页 "资源" 里下载! 主要技术:Java.springmvc.VUE.node.js.mybatis.mysql.tomcat.jquery.layui.boot ...
最新文章
- jquery的live方法
- python编程从入门到精通pdf-终于晓得python编程从入门到精通
- vsftpd登录报530
- 英特尔收购McAfee的10种结局猜测
- java sort 第二个参数_详解java Collections.sort的两种用法
- datagridview 绑定list 不能刷新界面_人人都可写代码-H5零基础编程-发布活动界面实操07...
- 图书管理系统需求分析说明书
- Nuget没办法使用了。
- usb为什么计算机无法识别网络,电脑的usb网卡无法识别怎么办
- 移动端日历---纯**自己写的
- Linux中不同文字颜色代表的含义
- html 设计尺寸,多少像素才合适 网页设计标准尺寸大讲解
- Excel合并单元格快捷键
- PHP替换指定字符 阿星小栈
- 1块钱30分钟利用华为云服务器配置一台云电脑并搭建一个简易网站(步步截图较详细)
- react项目实战五 个人中心页面
- 流计算框架 Flink 与 Storm 的性能对比
- POSA2 关于本书
- AR路由器web界面每IP限速配置方法
- 初学 STM32 (从 51 过度到 STM32 ,初学 STM32 必须了解的知识)
热门文章
- hadoop 主要配置文件
- 三个瓶盖能换一瓶水,问100个人需要喝水,最少需要买多少瓶水即可解决100人的喝水问题
- 数据可视化(data visualization)—— seaborn
- 算法——X^3+Y^3+Z^3=XYZ(水仙花数)
- C++14::lambda函数的类型
- python必背代码-Python中期学者必看:让你的python代码更高效灵活
- python 在线培训费用-线下python培训要多少钱?
- 学python需要什么软件-学python要准备什么软件-问答-阿里云开发者社区-阿里云
- class属性表种类集合,以及字段详解
- qq纯黑主题怎么设置_qq背景变黑色,怎么调过来