目录
一、前言
运营那边需要一个强大的富文本编辑器功能,用于推送文章的编辑等等,总而言之需要可以编辑PC端展示效果,或手机端展示。最开始选择的是wangEditor编辑器,因为整合很方便,功能相对简单,做完之后,交付时运营方表示不能满足他们的需求,于是,重新选择了百度的富文本编辑器。虽然很久没人维护更新了,但毕竟瘦死的骆驼比马大,其丰富的功能刚好满足我们的需求。
二、官网下载
官网地址:http://ueditor.baidu.com/website/
下载最新的Jsp UTF-8版,解压后目录如下
三、整合至spring项目
第一步:
将该文件夹下所有的文件拷贝至 WebRoot(或webapp) 下,新建ueditor文件夹,存放这些文件,如下图
第二步:
将 jsp\lib 所有的jar包拷贝至lib目录下,引入项目,有重复的jar包保持版本不冲突即可,关键jar为 ueditor-1.1.2.jar ,其他为该jar包的依赖包。
第三步:
修改 ueditor.config.js 中的 serverUrl 值,该值为服务端的请求路径,如下图:
说明:目前我们服务端是没有相关接口的,需要自己开发,但已经给我们提供了相关示例,原请求路径为 jsp/controller.jsp ,我们查看jsp目录下的controller.jsp文件,其代码如下:
<%@ page language="java" contentType="text/html; charset=UTF-8"
import="com.baidu.ueditor.ActionEnter"
pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<%
request.setCharacterEncoding( "utf-8" );
response.setHeader("Content-Type" , "text/html");
String rootPath = application.getRealPath( "/" );
out.write( new ActionEnter( request, rootPath ).exec() );
%>
第四步:
根据第三步中,百度富文本编辑器给我们提供的示例,我们编写自己的controller。新建UeditorController,按照controller.jsp中的文件编写请求方法,代码如下:
@Controller
@RequestMapping(value="/ueditor")
public class UeditorController {
@RequestMapping(value="/config")
public void config(HttpServletRequest request, HttpServletResponse response){
response.setContentType("application/json");
String rootPath = request.getSession()
.getServletContext().getRealPath("/");
try {
PrintWriter writer = response.getWriter();
String exec = new ActionEnter(request, rootPath).exec();
writer.write(exec);
writer.flush();
writer.close();
} catch (Exception e) {
e.printStackTrace();
}
}
}
这里的请求映射路径为 /ueditor/config,第三步中,我们配置的路径为 .. /ueditor/config.do ,因为配置的路径为相路径,所以需要用( .. )回退上级目录拼接为正确的请求全路径。
特别注意:富文本编辑器服务端寻找config.json配置文件,是通过请求请求路径寻找的,如,我们配置的请求路径为 /ueditor/config.do。则,加载配置文件的路径为 /ueditor/config.json (我们的WebRoot目录下有ueditor文件夹,但是config.json文件在jsp目录里面,所以要将它复制出来)。如果配置的路径为 /test/config ,则加载配置文件的路径为 /test/config.json 意味着,WebRoot目录下,要有test文件夹并且里面有config.json,才能保证请求正常,否则会提示配置文件初始化失败。
再次提醒:请求路径 /ueditor/config.do 必须对应 WebRoot文件夹下 /ueditor/config.json文件
再次提醒:请求路径 /ueditor/config.do 必须对应 WebRoot文件夹下 /ueditor/config.json文件
再次提醒:请求路径 /ueditor/config.do 必须对应 WebRoot文件夹下 /ueditor/config.json文件、
没有复制一份到指定文件夹
第五步:
现在基础环境已经搭建完成,我们在jsp页面中引用富文本编辑器,代码如下:
<!-- 加载编辑器的容器 -->
<div id="editor" name="content" style="height: 345px">
</div>
<script type="text/javascript" charset="utf-8" src="ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="ueditor/ueditor.all.js"> </script>
<!--建议手动加在语言,避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型,比如你在配置项目里配置的是英文,这里加载的中文,那最后就是中文-->
<script type="text/javascript" charset="utf-8" src="ueditor/lang/zh-cn/zh-cn.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
//实例化编辑器
//建议使用工厂方法getEditor创建和引用编辑器实例,如果在某个闭包下引用该编辑器,直接调用UE.getEditor('editor')就能拿到相关的实例
var ue = UE.getEditor('editor');
ue.ready(function() {
//this是当前创建的编辑器实例
this.setContent('')//这里设置回显数据
})
</script>
第六步:
重启项目,访问富文本编辑器页面,我们看下效果。
好的已经可以正常使用了,现在上传的各种文件,均在WebRoot /ueditor/jsp/upload/image下。
编辑器配置参考官方文档,我这里不做过多说明,地址如下:
http://fex.baidu.com/ueditor/#start-start
但是,这不是我要的结果,文章到这里还没完呢,下面我们说下怎么自定义上传。
四、自定义图片视频文件等上传
前提背景:
由于我们所有的文件全部是托管阿里云OSS服务的,运营端,PC端,APP端都是公用一套数据,所以上述默认的上传我们是无法使用的,需要自定义。自定义的话,很简单,参考官方文档给的请求规范,按照规范返回数据即可。
地址:http://fex.baidu.com/ueditor/#dev-request_specification
我这边按照文档重写了部分上传,这里贴代码给大家做参考:
@Controller
@RequestMapping(value="/ueditor")
public class UeditorController {
@RequestMapping(value="/config")
public void config(HttpServletRequest request, HttpServletResponse response,
@RequestParam(value = "medias",required = false) MultipartFile medias,
@RequestParam(value = "doodling",required = false) String doodling,
@RequestParam(value = "video",required = false)MultipartFile video,
@RequestParam(value = "annex",required = false)MultipartFile annex){
response.setContentType("application/json");
String rootPath = request.getSession()
.getServletContext().getRealPath("/");
//该参数表示请求的功能,如值为 uploadimage 表示上传图片
String action = request.getParameter("action");
try {
PrintWriter writer = response.getWriter();
if(StringUtils.isEmpty(action)){
writer.write("{status:\"无效的Action\"}");
writer.flush();
writer.close();
return;
}
if("uploadimage".equals(action)){
//上传图片
writer.write(uploadImg(medias));
writer.flush();
writer.close();
return;
}
if("uploadscrawl".equals(action)){
//上传涂鸦的base64图片
writer.write(uploadBase64Img(doodling));
writer.flush();
writer.close();
return;
}
if("uploadvideo".equals(action)){
//上传视频
writer.write(uploadVideo(video));
writer.flush();
writer.close();
return;
}
if("uploadfile".equals(action)){
//上传附件
writer.write(uploadVideo(annex));
writer.flush();
writer.close();
return;
}
if("catchimage".equals(action)){//批量处理网络资源图片上传转存
String[] list = request.getParameterValues("source[]");
//上传网络资源图片
writer.write(uploadNetworkImage(list));
writer.flush();
writer.close();
return;
}
String exec = new ActionEnter(request, rootPath).exec();
writer.write(exec);
writer.flush();
writer.close();
} catch (Exception e) {
e.printStackTrace();
}
}
public String uploadImg(MultipartFile medias)throws Exception{
//按照规定格式返回json数据即可
Map<String, Object> map = new HashMap();
map.put("size", medias.getSize());
map.put("type", medias.getContentType());
List<String> images = new ArrayList<>();
String name = medias.getOriginalFilename();
String suffix = name.substring(name.lastIndexOf("."));
//这里我是上传到阿里云进行管理,大家吧这一步改为自己的上传逻辑即可,url图片的全路径
String imagePath = OssUtil.uploadFileImage(medias.getInputStream(),suffix);
String url = OssUtil.URL_PATH+imagePath;
images.add(url);
map.put("original",url.substring(url.lastIndexOf("/")+1));
map.put("state", "SUCCESS");
map.put("url", url);
return JSON.toJSONString(map);
}
public String uploadBase64Img(String doodling)throws Exception{
//将字符串转换为byte数组
byte[] bytes = new BASE64Decoder().decodeBuffer(doodling.trim());
//转化为输入流
ByteArrayInputStream inputStream = new ByteArrayInputStream(bytes);
//这里我是上传到阿里云进行管理,大家吧这一步改为自己的上传逻辑即可,url图片的全路径
String imagePath = OssUtil.uploadFileImage(inputStream,".jpg");
Map<String, Object> map = new HashMap();
map.put("state", "SUCCESS");
map.put("url", OssUtil.URL_PATH+imagePath);
return JSON.toJSONString(map);
}
public String uploadVideo(MultipartFile video)throws Exception{
String name = video.getOriginalFilename();
String suffix = name.substring(name.lastIndexOf("."));
//这里我是上传到阿里云进行管理,大家吧这一步改为自己的上传逻辑即可,url图片的全路径
String imagePath = OssUtil.uploadFileImage(video.getInputStream(),suffix);
Map<String, Object> map = new HashMap();
map.put("state", "SUCCESS");
map.put("url", OssUtil.URL_PATH+imagePath);
return JSON.toJSONString(map);
}
public String uploadNetworkImage(String[] list){
if(null == list || list.length == 0){
return null;
}
JSONObject result = new JSONObject();
List resultList = new ArrayList();
for(String urlStr : list){
HttpURLConnection connection = null;
URL url = null;
String suffix = null;
try {
url = new URL(urlStr);
connection = (HttpURLConnection)url.openConnection();
connection.setInstanceFollowRedirects(true);
connection.setUseCaches(true);
suffix = MIMEType.getSuffix(connection.getContentType());
//这里我是上传到阿里云进行管理,大家吧这一步改为自己的上传逻辑即可,url图片的全路径
String imagePath = OssUtil.uploadFileImage(connection.getInputStream(),suffix);
JSONObject jsonObject = new JSONObject();
jsonObject.put("state","SUCCESS");
jsonObject.put("source",urlStr);
jsonObject.put("url",OssUtil.URL_PATH+imagePath);
resultList.add(jsonObject);
}catch (Exception e){
e.printStackTrace();
}
}
result.put("state","SUCCESS");
result.put("list",resultList);
return JSON.toJSONString(result);
}
}
如果大家在整合中出了问题请留言,我会尽量帮大家解决的