UEditor富文本编辑器整合经验分享（二）

一、引言          

       12月23日在博客上给大家分享了一篇《 UEditor富文本编辑器整合经验分享(整合至SpringMVC）》文章(http://blog.csdn.net/lixinyao5281/article/details/78878774)，主要内容是介绍了一下UEditor整合及使用，解决了图片上传、图片回显、文件上传、文件下载等大家常关心的富文本应用的问题，至于扩展问题，比如 涂鸦、视频、音频播放这些更高级的内容并未涉及，今天本文主要来探讨一下这几个高级一些的UEditor功能的整合使用，及前后台代码的关键点。本文解决的主要问题是UEditor涂鸦后生成图片上传、存储、页面显示和视频、音频文件（如mp4,mp3等）上传、存储、页面在线播放的功能。



涂鸦生成图片上传并回显



上传视频文件并在线播放

二、UEditor涂鸦功能

2.1 ueditor涂鸦功能介绍

    UEditor的涂鸦功能的实现原理是运用H5的<canvas>标签(该标签用于在网页上绘制图形)供用户在浏览器上绘制2D图型，并通过JS的Base64加密后用Ajax异步提交至后台再经过Base64解密成betye字节数组再转化为输入流存储在服务器上的过程。  



UEditor 涂鸦功能展示-用户进行涂鸦


 

UEditor涂鸦功能展示-回显在页面上

2.2动手整合ueditor涂鸦功能

 

2.2.1 关于ueditor.config.js

打开涂鸦按钮

找到 toolbar的定义处，并确保涂鸦按钮是开放状态，如下图所示



定义好涂鸦后台地址

然后在本文件中定义好涂鸦的后台访问地址,如下图所示



2.2.2 关于scrawl.js

本文件涉及到涂鸦前端如何将图片提交到后台，以及前端如何回显等问题

后台方法入口 



原代码664行

将原代码getActionUrl注释掉，并添加以下代码，重新定义后台服务入口及参数

varcontextRootPath = editor.getOpt('contextRootPath');

var actionUrl =contextRootPath+editor.getOpt('scrawlActionName'),

params ='filetype=scrawl';



浏览器控制台打印输出涂鸦图片的后台地址

前端图片回显



原代码642行

重新定义了涂鸦图片回显链接



浏览器控制台打印输出涂鸦图片的回显链接地址

2.2.2 后台代码实施涂鸦图片服务端存储

后台服务

/**
* 涂鸦上传
* @param response
* @param request
* @return
* @throws Exception
*/
@ResponseBody
@RequestMapping(value="/scrawlUpload",method = RequestMethod.POST)
public Map<String, Object> scrawlUpload(HttpServletResponse response,
HttpServletRequest request)throws Exception{
Map<String, Object> params = new HashMap<String, Object>();
String filetype = request.getParameter("filetype");
System.out.println("filetype:"+filetype);
String upfile = request.getParameter("upfile");//Base64编码过的图片数据信息，对字节数组字符串进行Base64解码
System.out.println("upfile:"+upfile);
String basePath = "";
if("scrawl".equals(filetype)){
basePath = LoadPropertiesDataUtils.getValue("lixy.uploading.url.scrawl");
}
if(basePath == null || "".equals(basePath)){
basePath = "d:/lixy/static";  //与properties文件中lyz.uploading.url相同，未读取到文件数据时为basePath赋默认值
}
String fileName = String.valueOf(System.currentTimeMillis()).concat("_").concat(RandomUtils.getRandom(6)).concat(".").concat("png");
StringBuilder sb = new StringBuilder();
//拼接保存路径
sb.append(basePath).append("/").append(fileName);
// 在自己的项目中构造出一个用于存放用户照片的文件夹
File f = new File(sb.toString());
if (!f.exists()) {
f.getParentFile().mkdirs();
}
// 使用BASE64对图片文件数据进行解码操作
BASE64Decoder decoder = new BASE64Decoder();
try {
// 通过Base64解密，将图片数据解密成字节数组
byte[] bytes = decoder.decodeBuffer(upfile);
// 构造字节数组输入流
ByteArrayInputStream bais = new ByteArrayInputStream(bytes);
// 读取输入流的数据
BufferedImage bi = ImageIO.read(bais);
// 将数据信息写进图片文件中
ImageIO.write(bi, "png", f);// 不管输出什么格式图片，此处不需改动
params.put("state", "SUCCESS");
params.put("url", sb.toString());
params.put("size", upfile.length());
params.put("original", fileName);
params.put("type", "png");
bais.close();
} catch (IOException e) {
e.printStackTrace();
}

return params;
}

以上方法实现了涂鸦图片上传至后台后完成Base64解码并存储至服务器指定位置的功能

applications.properties配置服务端涂鸦图片存储路径



涂鸦图片后台存储路径设置



涂鸦生成图片存储在服务器指定目标 

至于图片读取方法viewImagesToPage在上篇文章里有解释，这里就不重复了

三、UEditor视频功能

3.1 关于纠正上篇博文附件上传部分的纰漏

     关于上一篇博文附件上传部分的代码有纰漏，如果不用到视频上传的功能，该纰漏可以被隐藏掉，但如果读者需要使用Ueditor的视频上传及播放功能，那么这个纰漏则必须修复。

上篇博文在谈到文件上传路径时提到webuploader.js 6199行



其实webuploader.js作为整个web端文件上传的入口，文件类型filetype=file写死在这里是不合适的（关键原因是视频上传功能也要用到这段代码）。
正确的处理方式应该是以下代码（参考）



那么对应的文件上传attachment.js也由以下



改为以下即可 actionUrl = actionUrl+’?filetype=file’



3.2  关于webuploader.js

      关于webuploader.js 6199行部分代码应该按3.1节介绍的那样进行调整去掉参数filetype=file,如不然，会影响到视频上传的业务逻辑。

3.3 关于ueditor.config.js

    该文件是ueditor最重要的配置文件，后台配置基本定义在此。



这里定义了videoActionName,videoFieldName,videoUrlPrefix,videoMaxSize,videoAllowFiles等视频上传必须用到的参数设置     

videoActionName：

定义了视频上传后台类及方法 比如  /resource/upload/images (参考UploadImageController)

videoUrlPrefix：

视频访问路径 比如 /ueditor/resource/upload/fileDownLoad.do?(参考UploadImageController)

3.4 关于video.js

l  视频提交后台路径

原码第376行，建议不用getActionUrl获得actionUrl 



采用 actionUrl= editor.getOpt('videoActionName') 直接获得ueditor.config.js中定义好的videoActionName

在actionUrl末尾追加”?filetype=video”做为参数传至后台

 

l  视频前端播放路径

原码第294行 url:uploadDir + file.url,建议改为

url: uploadDir + file.url+'&filename='+file.original,

其中uploadDir来自先前在ueditor.config.js中定义好的videoUrlPrefix



视频前端播放路径定义



浏览器控制台输出

3.5 视频上传控制类UploadImageController

    本类是实现视频上传至服务指定目录的指定服务类，同时也是视频文件实现在线播放的服务类，与配置文件ueditor.config.js中定义的以下参数有关联

videoActionName:

定义了视频上传后台类及方法 比如  /resource/upload/images

videoUrlPrefix:

视频文件在线播放后台方法 比如 /ueditor/resource/upload/fileDownLoad.do?

代码参考如下

视频文件上传及存储方法images

/**
* 上传图片
* @param file
* @param request
* @param response
* @return MultipartFile uploadFile,
*/
@ResponseBody
@RequestMapping(value="/images",method = RequestMethod.POST)
public Map<String, Object> images (@RequestParam(value = "file", required = false) MultipartFile file, HttpServletRequest request, HttpServletResponse response){
Map<String, Object> params = new HashMap<String, Object>();
if (file == null){
System.out.println("未获得上传文件!");
return null;
}
try{
String filetype = request.getParameter("filetype")+"";
System.out.println("filetype:"+filetype);
String basePath = "";
if("image".equals(filetype)){
basePath = LoadPropertiesDataUtils.getValue("lixy.uploading.url.image");
}else if("file".equals(filetype)){
basePath = LoadPropertiesDataUtils.getValue("lixy.uploading.url.file");
}else if("video".equals(filetype)){
basePath = LoadPropertiesDataUtils.getValue("lixy.uploading.url.video");
}
if(basePath == null || "".equals(basePath)){
basePath = "d:/lixy/static";  //与properties文件中lyz.uploading.url相同，未读取到文件数据时为basePath赋默认值
}
System.out.println("filename:"+file.getOriginalFilename());
String ext = StringUtils.getExt(file.getOriginalFilename());
String fileName = String.valueOf(System.currentTimeMillis()).concat("_").concat(RandomUtils.getRandom(6)).concat(".").concat(ext);
StringBuilder sb = new StringBuilder();
//拼接保存路径
sb.append(basePath).append("/").append(fileName);

String visitUrl = basePath.concat("/"+fileName);
File f = new File(sb.toString());
if(!f.exists()){
f.getParentFile().mkdirs();
}
OutputStream out = new FileOutputStream(f);
FileCopyUtils.copy(file.getInputStream(), out);
params.put("state", "SUCCESS");
params.put("url", visitUrl);
params.put("size", file.getSize());
params.put("original", fileName);
params.put("type", file.getContentType());
params.put("filename", file.getOriginalFilename());
System.out.println("url:"+visitUrl+" original:"+fileName+" filename:"+file.getOriginalFilename()+" type:"+file.getContentType());
} catch (Exception e){
params.put("state", "ERROR");
e.printStackTrace();
}
return params;
}

视频文件在线播放方法fileDownLoad

/**
* 下载文件
* @param request
* @param response
* @return
* @throws IOException
*/
@RequestMapping(value = "/fileDownLoad",method = RequestMethod.GET)
public void fileDownLoad(HttpServletRequest request, HttpServletResponse response) throws IOException {
// 下载本地文件
String url = request.getParameter("url")+"";
String fileName = request.getParameter("filename")+"";
//如果是IE浏览器，则用URLEncode解析
if(isMSBrowser(request)){
fileName = URLEncoder.encode(fileName, "UTF-8");
}else{//如果是谷歌、火狐则解析为ISO-8859-1
fileName = new String(fileName.getBytes("UTF-8"), "ISO-8859-1");
}
System.out.println("filename:"+fileName+" url:"+url);
// 读到流中
InputStream inStream = new FileInputStream(url);// 文件的存放路径
//		fileName = url.substring(url.lastIndexOf("/")+1);
//		System.out.println("filename:"+fileName);
// 设置输出的格式
response.reset();
//		response.setContentType("bin");
response.setContentType("application/vnd.ms-excel;charset=utf-8");
response.addHeader("Content-Disposition", "attachment; filename=\"" + fileName + "\"");
// 循环取出流中的数据
byte[] b = new byte[100];
int len;
try {
while ((len = inStream.read(b)) > 0)
response.getOutputStream().write(b, 0, len);
inStream.close();
} catch (IOException e) {
e.printStackTrace();
}
}

细心的读者可能已经看出来了，这不就是下载文件的方法吗？没错，就是这样的，在线视频播放后台支撑方法就是普通文件下载方法,( 因为本质是从后台读取文件字节流)

3.6 关于视频上传服务器存储路径的问题

   对视频文件的存储路径定义在applications.properties文件中



 后台的UploadImageController将对请求参数的不同将图片和附件存放在不同的目录中





3.7 关于ueditor.all.js

 原码17772行,将image改为video



四、UEditor 音频功能

4.1  请参照第三章节介绍的视频功能

     由于Ueditor默认的音频功能是去网上搜索音乐，这里介绍意义不大，由于第3章节已经完整介绍了Ueditor本地视频上传及在线播放的功能，同理音频文件也是可以按视频文件处理的，唯一不同的地方是，在线播放时没有图像（它是音频嘛）目前能支持的视、音频文件格式有

".flv", ".swf",".mkv", ".avi", ".rm", ".rmvb",".mpeg", ".mpg",

                              ".ogg", ".ogv",".mov", ".wmv", ".mp4", ".webm",".mp3", ".wav", ".mid"



Ueditor默认支持的音频插件



使用整合后的视频插件实现音频文件上传及在线播放



上传成功后，点击播放按钮即开始在线播放音乐

五、案例分享

    本文提供的完全与文章内容一致的案例，可供读者实际在本地运行

5.1  案例下载地址

http://download.csdn.net/download/lixinyao5281/10184662

5.2 运行准备工作

       请参考上一篇博文

5.3 运行效果展示



在线视频加涂鸦



视频在线播放

涂鸦按钮和视频上传按钮如下图左侧和右侧