CKEditor使用

CKEDITOR 图片上传以及预览功能实现步骤：

1：下载ckeditor，解压，将整个目录复制到项目webapp下

2：在jsp中，添加以下代码

先导入ckeditor的js包，

<script type="text/javascript" src="ckeditor/ckeditor.js"></script>

然后添加textarea

 <textarea name="editor1" id="editor1" rows="10" cols="80">

                This is my textarea to be replaced with CKEditor.

            </textarea>

     <script>

     CKEDITOR.replace( 'editor1', {

         toolbar: 'Basic',

         uiColor: '#9AB8F3'

     });

     </script>

3：图片上传功能暂时是屏蔽的，需要修改源代码

“预览”中有一大堆鸟语，看得很不爽。可以打开ckeditor/plugins/image/dialogs/image.js文件，搜索“b.config.image_previewText”就能找到这段鸟语了，(b.config.image_previewText||'')单引号中的内容全删了，注意别删多了。

还是ckeditor/plugins/image/dialogs/image.js这个文件，搜索“upload”可以找到这一段

id:'Upload',hidden:true

实际上上传功能被隐藏了，把上面的true改成false，再打开编辑器，就能找到上传功能了。

4：在ckeditor/config.js中添加上传图片的响应

var pathName = window.document.location.pathname;

var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);

config.filebrowserImageUploadUrl = projectName+"/image/upload"; //固定路径,这是上传的图片的action

在config.js添加以上几句话，就会将点击上传到服务器之后的响应传到controller之中。

 

 

 

5：controller配置

注意方法的返回值最好是void，刚开始我返回string类型的提示语，好像都返回不成功，具体原因未知，也许可能大概是out.println和方法的返回值冲突。

@RequestMapping("/upload")

@ResponseBody

public void processImageUpload(@ModelAttribute UploadFile file,HttpServletResponse  response , MultipartFile upload,HttpServletRequest servletRequest,

StringCKEditorFuncNum)

 

要想接收到上传图片的内容，必须定义一个MultipartFile类型，名称必须为upload（也可以在ckeditor的js中修改上传的名称），同时用String类型接收CKEditorFuncNum（这个在返回数据时要用到）。

 

 

图片的重命名以及保存只给出关键代码：

String a = upload.getOriginalFilename();//获取图片的名称

String extracted = a.substring(a.lastIndexOf(".") + 1);  //获取图片的后缀，可以进行判断是否为jpg等类型

Calendar calendar = GregorianCalendar.getInstance(); 

    UUID uuid = UUID.randomUUID();

        String newFileName = uuid + "." +extracted;

String name ="/img/"+calendar.get(Calendar.YEAR)+"-"+calendar.get(Calendar.MONTH);

        String newName = "img/"+calendar.get(Calendar.YEAR)+"-"+calendar.get(Calendar.MONTH);

//返回给页面的路径，注意可以是相对路径，也可以是图片的URL。类似于'http://www.jb51.net/image.jpg

        String logoPathDir = name;

  String logoRealPathDir = servletRequest.getSession().getServletContext()

                .getRealPath(logoPathDir);

//构建存储文件夹的具体路径，本例是F:\1\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\springmvcspringmybatis\img\2014-2。

 

        File toFile = new File(logoRealPathDir, newFileName);

org.apache.commons.io.FileUtils.copyInputStreamToFile(upload.getInputStream(), toFile);//复制上传的文件到logoRealPathDir文件夹，并且命名为newFileName

 

最后返回一段JavaScript代码给前端，主要功能是给

箭头所指的URL赋值，这样就能在前端预览此图片了。具体代码如下：

 

response.setCharacterEncoding("GBK");  

        PrintWriter out = response.getWriter();  

response.reset();

 response.setContentType("text/html; charset=UTF-8"); 

   response.setHeader("Cache-Control", "no-cache"); 

//设置返回的格式之内 

 out.println("<script type=\"text/javascript\">");

  out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",'"+newName+"/"+newFileName+"',''" + ")"); 

 

//CKEditor 中返回图片设定页面.此处只适合单个文件上传,CallBack是回调时显示的位置，这个参数必须有，CallBack也就是在方法头部接收到的CKEditorFuncNum

newFileName也就是在前面复制文件具体路径的相对路径，在此处是img/2014-2/023a7be5-0d97-4120-98a2-4aad6b58b876.jpg

out.println("</script>");

 

大家也可以参照

http://blog.csdn.net/mydwr/article/details/8669594

单纯的ckeditor是可以上传图片的，但是使用ckeditor+ckfinder可能使用起来更方便，以后会写一下ckeditor和ckfinder的使用