一、ckeditor4的配
1.下载ckeditor4
进入官网/ckeditor-4/download/可以直接点击下载，也可以下拉到 CKEditor 4 - previous versions 进行版本选择下载
2.解压并配置
解压压缩包打开 ckeditor -> samples 里面有一个index.html,点击打开
3.进行功能配置
点开后会进入一个界面，在网页中可以根据自己需要进行配置，并自动形成配置代码
生成配置代码
4.导入项目
将之前解压的压缩包复制到项目的静态目录下
5.引入CKEditor的js文件
在这里我配置过静态资源目录，src下是自己的项目ckeditor的目录
<script type="text/javascript" src="${pageContext.request.contextPath}/ckeditor/ckeditor.js"></script>
6.使用CKEditor
在页面代码中写一个容器，然后用ckeditor进行替换，这里有两种方式：
第一种：class=“ckeditor”
<textarea class="ckeditor" id="editor" name="content"></textarea>
第二种：替换
<textarea id="editor" name="content"></textarea><script type="text/javascript">window.onload = function(){CKEDITOR.replace( 'editor');};</script>
7.启动项目
在这就已经可以显示出原有样式了
8.需求配置
在ckeditor中有一个config.js,这是提供用户自己配置的文件，将第三步产生的配置代码复制到 CKEDITOR.editorConfig = function( config ) {} 里面
重新启动项目就可以进行最基本的使用了
二、图片上传
虽然我们配置好了，但是图片上传功能并不能使用，在ckeditor中上传功能是隐藏的
1.显示上传
在这个可以在 ckeditor -> plugins -> image -> dialogs -> image.js配置，将id:“Upload”,hidden:!0 ，hidden改为0，但是这个js是简化版，配置比较麻烦，但是我们可以在config.js进行配置，功能如下：
/*去掉图片预览框的文字*/config.image_previewText = ' ';//隐藏“超链接”与“高级选项”只留上传和预览按钮config.removeDialogTabs = 'image:advanced;image:Link;','help';/*开启工具栏“图像”中文件上传功能，后面的url为图片上传要指向的的action或servlet*/config.filebrowserImageUploadUrl= "/forum/upload";
在这里就出来了，config.filebrowserImageUploadUrl= “”; 指向你的action或servlet，没有配置就会出现下面情况
2.配置后台action
utils类
public class UploadFileName {//获取文件urlpublic static String getImgUrl(String fileName){//返回时间+文件名return new Date().getTime()+fileName;}}/*上传文件工具类*/public class UploadUtils {/** 上传方法* 返回上传文件的访问路径 * 目录调用者创建* */public static String uploadFile(HttpServletRequest req,String tempPath,String uploadPath){try {//1.创建磁盘文件工厂String path_temp = req.getServletContext().getRealPath(tempPath);DiskFileItemFactory factory = new DiskFileItemFactory(1024*1024, new File(path_temp));//2.创建文件上传核心类 ServletFileUpload upload = new ServletFileUpload(factory);//3.设置上传文件名称编码 upload.setHeaderEncoding("UTF-8");//4.判断是否是上传表单boolean isMultipartContent = upload.isMultipartContent(req); String fileName = "";if(isMultipartContent){//5.是上传表单 解析文件集合 List<FileItem> list = upload.parseRequest(req);if(list!=null){//6.遍历集合for(FileItem item : list){//判断item是文本类型 还是 字节类型 boolean isFormField = item.isFormField();if(isFormField){//文本类型String key = item.getFieldName();String value = item.getString("UTF-8");} else {//字节文件fileName = item.getName();String key = item.getFieldName();//获得当前日期的毫秒值Long time = new Date().getTime();fileName = time+fileName;//获得上传内容InputStream in = item.getInputStream();//获得部署路径String path = req.getServletContext().getRealPath("/"+uploadPath);OutputStream out= new FileOutputStream(path+"/"+fileName);IOUtils.copy(in, out);out.close();in.close();//删除临时文件item.delete();}}}}String fangWenPath = req.getContextPath()+"/"+uploadPath+"/"+fileName;return fangWenPath;} catch (Exception e) {e.printStackTrace();}return null;}}
Controller层：
public class UploadController {@Value("")//注入文件储存路径private String dir;@Value("/image")//服务器映射虚拟路径private String imgServiceUrl;@RequestMapping("/upload")@ResponseBodypublic Map upload(MultipartFile upload) throws Exception{Map map = new HashMap();String fileName = upload.getOriginalFilename();String imgUrl = UploadFileName.getImgUrl(fileName);upload.transferTo(new File(dir+"/"+imgUrl));imgUrl = imgServiceUrl+"/"+imgUrl;map.put("uploaded","1");map.put("url",imgUrl);return map;}}
效果如下：
3.文件上传问题总结
在这里一定注意返回对象，之前在网上查了好多都不行，最后查了文档，它要求返回一个json型的数据，如果返回不对会出现以下情况
（1）没有返回uploaded,或返回的不是uploaded
map.put("uploaded","1");
（2）没有返回url,或返回url错误，会找不到文件路径
map.put("url",imgUrl);
注：返回方式很多，但是这两个参数必须要有，如果按json返回，参数名要一致！！！
