UEditor CKEditor 网页编辑器
UEditor：百度编辑器 ，旨在打造符合国人使用习惯的网页编辑器，使用起来确实简单，文档全面，开放源码。
CKEditor
1.下载CKEditor的js库，包含js css文件的整个目录，放到网站根目录，假设为ckeditor，
2.编写一个访问页面，假设为ckeditor.jsp，内容如下：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String contextPath = request.getContextPath();
%>
A Simple Page with CKEditor
ck可以通过配置config.js或者网页内容参数指定以修改ck的一些样式行为等。
后台 spring mvc 代码：
package com.test.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.commons.CommonsMultipartFile;
import javax.servlet.ServletContext;
import javax.servlet.http.HttpServletRequest;
import java.io.File;
@Controller
@RequestMapping("/upload")
public class UploadController {
@RequestMapping("/uploadImg")
@ResponseBody
// upload :这个目前是适用于 CKEditor 上传 字段名的，对于其它方式的上传，应该改为对应的字段名字
// 此方法的返回值目前也是适用于 CKEditor的，对于其它方式的上传应该修改为对应的返回值
public String uploadImg(FormParams formParams, @RequestParam("upload") CommonsMultipartFile upFile,
HttpServletRequest request) {
if (upFile.isEmpty()) throw new RuntimeException("file is empty !!!");
String returnBody = null;
String filename = upFile.getOriginalFilename();
System.out.println(upFile.getContentType());
System.out.println(filename);
System.out.println(upFile.getName());
System.out.println(upFile.getSize());
ServletContext servletContext = request.getSession().getServletContext();
String uploadPath = servletContext.getRealPath("/upload");
//获取本地存储路径
File uploadDir = new File(uploadPath);
if (!uploadDir.exists()) uploadDir.mkdirs();
File toFile = new File(uploadDir, filename);
try {
upFile.getFileItem().write(toFile); // 将上传的文件写入新建的文件中
System.out.println("=======文件上传成功====");
} catch (Exception e) {
e.printStackTrace();
}
String callback = formParams.getCKEditorFuncNum();
System.out.println("ckCsrfToken: " + formParams.getCkCsrfToken());
System.out.println("CKEditorFuncNum: " + callback);
// 返回“图像”选项卡并显示图片
StringBuilder sb = new StringBuilder();
sb.append("");
returnBody = sb.toString();
return returnBody;
}
}
package com.test.controller;
public class FormParams {
// 这里的参数目前是适配 CKEditor 提交的，对于其他方式的提交，应该修改为对应的字段
private String ckCsrfToken;
private String CKEditorFuncNum;
public String getCkCsrfToken() {
return ckCsrfToken;
}
public void setCkCsrfToken(String ckCsrfToken) {
this.ckCsrfToken = ckCsrfToken;
}
public String getCKEditorFuncNum() {
return CKEditorFuncNum;
}
public void setCKEditorFuncNum(String CKEditorFuncNum) {
this.CKEditorFuncNum = CKEditorFuncNum;
}
}
代码中使用 硬编码的形式，将上传的图片保存到网站根目录的 upload目录下 。
注意CK的要求是返回一段 js 脚本，其实是根 ck 的实现有关，ck的在线编辑的实时效果是利用 iframe实现的，其js请求涉及到了跨域问题，故通过 jsonp的形式要求服务器返回特定格式的 script 脚本，以执行后续的逻辑，其回调的js方法是通过 CKEditorFuncNum 参数指定的，另外 ckCsrfToken 用于 防 csrf （ 点击打开链接）攻击的。
UEditor 百度编辑器
UEditor和CKEditor实现架构有点类似，具体没研究，不过UEditor更加简便，原因在于UEditor提供了java客户端，省去了自己写上传保存逻辑的工作。
1.下载UEditor的UTF-8 jsp版本，解压到网站根目录，假设为 ueditor
2.UEditor附带了一个controller.jsp文件，这个文件是前端与后端通信的枢纽，它识别前端的请求并处理返回需要的结果，查看其源码可知它是将页面请求传递到ActionEnter中执行，ActionEnter中定义了不同类型的请求处理，通过页面不同的参数来调用不同的处理逻辑，并返回不同的结果。
PS：注意添加其java依赖到项目的类路径（依赖jar包位于UEditor/jsp/lib下）
3.一个页面示例：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
ueditor
注意：修改 ueditor.config.js文件中的
serverUrl: URL + "controller.jsp"为正确的路径，保证其通过浏览器可以正确地访问到即可，前端页面需要通过这个 serverUrl 配置的地址与后端 java代码通信，所以这个必需首先配置正确。
其次，config.json便是所有配置的集合，无论是后台java代码相关还是页面相关的保存路径、名称格式、访问前缀、文件大小限制等都在这里配置，对于前端需要的配置则是通过请求上面的 serverUrl 拿到之后再让js使用的，这样，前端和后端都配置在一起了，这种配置到一起的方式对于小应用到还好，如果ueditor复杂到一定成都，这种配置方式最终是要分离重构的。
好了，稍微看看他的工作原理，其实很简单，一个图片上传到请求发送到serverUrl，serverUrl配置的是controller.jsp，接收到请求传递到ActionEnter，ActionEnter通过参数解析发现是 上传请求，跟踪其代码会发现会进入到StorageManager中，此类从配置文件中拿到要保存的地址、命名等信息，由
private static State saveTmpFile(File tmpFile, String path) 进行实际文件保存，保存后根据配置中配置的 文件访问前缀等信息，组成合适的格式返回到前端js，前端js根据返回的信息就可以拿到图片的访问地址，进而呈现出上传的图片。