ckEditor使用经验

第一步 下载ckeditor 进入官网https://ckeditor.com/ckeditor-4/download/点击Release notes选择4.8.0版本点击Download.Zip下载

第二步 加入ckeditor文件夹到项目下 引入

描述：

上面的js中description可以是id也可以是name
第三步 就是设置图片上传ckeditor文件夹下的config.js中添加：
//设置预览页面为空
config.image_previewText=’ ';

//设置上传路径
config.filebrowserUploadUrl='/f/cms/util/uploadImage';

//设置高和宽
config.width=500;
config.height =380;

/**
* 富文本编辑器图片上传
* @param file
* @return
*/
@RequestMapping(value = “/uploadImage”, method = RequestMethod.POST)
public void uploadImage(@RequestParam(“upload”)MultipartFile[] file, HttpServletResponse response,HttpServletRequest request,HttpSession session) {
response.setCharacterEncoding(“UTF-8”);
PrintWriter out = null;
// CKEditor提交的很重要的一个参数 ,回调函数的序号
String callback = request.getParameter(“CKEditorFuncNum”);
try {
out = response.getWriter();
} catch (IOException e1) {
e1.printStackTrace();
}
UploadFileEntity fileInfo = null;
//上传目录地址
// String uploadDir = session.getServletContext().getRealPath("/") + “upload/”;
filePath = “D:\dpicmsUploadFile\imagesForAll\”;
下面的100就是去找的filePath
String uploadDir = UidUtil.getFilePath(100);
//如果目录不存在，自动创建文件夹
File dir = new File(uploadDir);
try {
List uploadFileEntityList = null;
try {
uploadFileEntityList = UidUtil.springUpload(request,100);
} catch (IOException e) {
e.printStackTrace();
}
if (null != uploadFileEntityList && uploadFileEntityList.size() > 0) {
boolean isSuccess = utilService.saveUploadFileList(uploadFileEntityList);
if (!isSuccess){
System.out.println(“上传成功”+uploadFileEntityList.get(0).getNewFileName());
}
}
// 返回"图像"选项卡并显示图片 request.getContextPath()为web项目名 4.8.0使用
out.println("<script type=“text/javascript”>");
out.println(“window.parent.CKEDITOR.tools.callFunction(” + callback
+ “,’/dpicmsUploadFile/imagesForAll/” + uploadFileEntityList.get(0).getNewFileName() + “’,’’)”);
out.println("");
//4.11.4使用
// String url = “/dpicmsUploadFile/imagesForAll/”+uploadFileEntityList.get(0).getNewFileName();
// JSONObject obj = new JSONObject();
// obj.put(“uploaded”, 1);
// obj.put(“fileName”, uploadFileEntityList.get(0).getNewFileName());
// obj.put(“url”, url);
// out.write(obj.toString());
} catch (Exception e) {
out.println("<script type=“text/javascript”>");
out.println(“window.parent.CKEDITOR.tools.callFunction(” + callback + “,’’,” + “‘文件上传失败！’);”);
out.println("");
}
}

/**
* 上传
* @param request
* @return
* @throws IllegalStateException
* @throws IOException
*/
public static List springUpload(HttpServletRequest request, int fileType) throws IllegalStateException, IOException {
long startTime = System.currentTimeMillis();
// 将当前上下文初始化给 CommonsMutipartResolver （多部分解析器）
CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(
request.getSession().getServletContext());

    List<UploadFileEntity> uploadFileEntities = new ArrayList<>();

    // 检查form中是否有enctype="multipart/form-data"
    if (multipartResolver.isMultipart(request)) {
        // 将request变成多部分request
        MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
        // 获取multiRequest 中所有的文件名
        Iterator<String> iter = multiRequest.getFileNames();
        while (iter.hasNext()) {
            // 一次遍历所有文件
            List<MultipartFile> files = multiRequest.getFiles(iter.next());
            if (null == files){break;}
            for (int i = 0; i < files.size(); i++) {
                MultipartFile file = files.get(i);
                if(StringUtils.isBlank(file.getOriginalFilename())){
                    continue;
                }
                UploadFileEntity uploadFileEntity = new UploadFileEntity();
                if (file != null) {
                    uploadFileEntity.setId(getUUID());
                    uploadFileEntity.setCreateDate(new Date());
                    uploadFileEntity.setFileFormat(file.getContentType());
                    uploadFileEntity.setFileType(fileType);
                    uploadFileEntity.setOldFileName(file.getOriginalFilename());
                    uploadFileEntity.setSize(String.valueOf(file.getSize()));
                    String newFileName = new Date().getTime() +"-"+ file.getOriginalFilename();
                    String filePath = getFilePath(fileType) + newFileName;

                    uploadFileEntity.setFilePath(filePath);
                    uploadFileEntity.setNewFileName(newFileName);
                    // 上传
                    file.transferTo(new File(filePath));
                }
                uploadFileEntities.add(uploadFileEntity);
            }
        }
    }
    long endTime = System.currentTimeMillis();
    System.out.println("运行时间：" + String.valueOf(endTime - startTime) + "ms");
    return  uploadFileEntities;
}

/**
* 批量新增上传文件
* @param uploadFileEntities
* @return
*/
@Transactional
public boolean saveUploadFileList(List uploadFileEntities){
int result = utilDao.saveUploadFileList(uploadFileEntities);
if (result > 0)return true;
return false;
}

第四步 将前台的数据传入后台
在获取textaera值前js添加下面代码，不然获取不到值
for (instance in CKEDITOR.instances){
CKEDITOR.instances[instance].updateElement();
}
第五步，如果有编辑页面，则需要 CKEDITOR.instances.editContent.setData(text)给textaera赋值

总结
上传图片传到后台的参数CKEditorFuncNum为空
// CKEditor提交的很重要的一个参数 ,回调函数的序号
String callback = this.request.getParameter(“CKEditorFuncNum”);
将CKEditor版本由CKEditor 4.9.0换成CKEditor 4.8.0解决问题
上传图片传到后台的参数MultipartFile[]为空
添加参数注解@RequestParam(“upload”)后解决，代码如下：
public void uploadImage(@RequestParam(“upload”)MultipartFile[] file)