ckeditor的使用

1、ckeditor 需要的jar包：
              ckeditor-java-core.jar  
              commons-fileupload-1.2.1.jar
              commons-io-1.3.2.jar
              slf4j-api-1.5.8.jar
              slf4j-simple-1.5.8.jar
            
2、在JSP页面引入<%@ taglib uri="http://ckeditor.com" prefix="fck"%>

   引入js文件 <script type="text/javascript" src="ckeditor/ckeditor.js"></script>
   
   body标签：<fck:editor editor="myEditor" basePath="/ckeditor" value="this is content"></fck:editor>
   
3、配置的更改：（三种方式）

        第一种：直接在ckeditor的核心js文件（ckeditor.js）中更改
        
        第二种：自定义js文件将ckeditor.js文件中要更改的内容拷贝到自定义js文件中进行更改
        
                注意：拷贝、更改内容要保持原来的格式
                
        第三种：在页面的调用代码中实现对editor的实例进行配置（较麻烦）
        
4、一般更改的配置：
    ① ckeditor中 Ctrl键 ---- 换段落  shift+Ctrl 键----换行
    
       需要改为 Ctrl键----换行  Shift+Ctrl键----换段落
       
       更改的地方：ckeditor.js文件中找到 enterMode:1 改为 enterMode:2  shiftEnterMode:2 改为 shiftEnterMode:1
    
    ②工具栏的修改：可以将不需要的图标删除
       在ckeditor.js中将不需要的删除（大约在11488行找到 toolbar_Full 将此中不需要的删除）
       
       也可以将toolbar_Full中的代码拷贝到config.js中将不需要的删除
       
       注意：工具按钮是分组的，一个name内的大括号就是一个工具按钮分组，items后边是具体的按钮，
       
             “/”表示工具栏换行，“-”表示工具图标之间的中隔线“|”
       
    ③添加字体：在ckeditor.js文件中找到i.font_names= "……" 这句  在里面添加要增加的字体  i.fontSize_sizes 可更改字体
    
    ④更改表情符号：将要更换的表情图片拷贝到 ckeditor--plugins--smiley--image
                    
                    在ckeditor.js中找到 i.smiley_images=[ ] 将图片名称填写到里面
                                        
                                        并在i.smiley_descriptions=[] 中填写图片的对应提示信息
                                        
    ⑤更改背景色：在config.js中配置 config.uiColor = '#FF0080';
    
    ⑥更改工具栏上图标提示语的语言  在config.js中配置 config.language = 'fr';  （）
                                    
5、文件上传：（使用struts2）
     ① 首先，还是image.js这个文件，搜索“upload”可以找到这一段 ---- id:'Upload',hidden:true
         
         实际上上传功能被隐藏了，把上面的true改成false，再打开编辑器，就能找到上传功能了。
    
     ② 上面的只是一个上传页面。也就相当于一个HTML的form表单，要配置点击“上传到服务器上”按钮后请求的Action。可以在ckeditor/config.js中配置。
        
        加入：
        
        config.filebrowserUploadUrl="actions/ckeditorUpload";
        
        "ckeditorUpload"是请求的URL，也就是点击这个按钮就会post到ckeditorUpload地址进行处理，这里指向的是Struts 2的一个Action。当然，也可以用servlet或者ASP、PHP等来处理请求。

     ③ 文件上传的控件相当于<input  type="file" name="upload" .../>，其name是”upload”，知道了name那么就可以在Action中获取这个文件。
        
        private File upload;  //文件
        
        private String uploadContentType;  //文件类型
        
        private String uploadFileName;   //文件名
    
     ④ 如果上传的图片格式不正确，可以在上传界面进行提示。
        
        这个提示不是ckeditor提示的，要在Action中响应。
        
        HttpServletResponse response =ServletActionContext.getResponse();
        
        response.setCharacterEncoding("GBK");
        
        PrintWriter out = response.getWriter();
        
        if(???){
            
            out.print("<font color=\"red\"size=\"2\">*文件格式不正确（必须为.jpg/.gif/.bmp/.png文件）</font>");
            
            return null;
         }
     ⑤ nputStream is = newFileInputStream(upload);

        String uploadPath = ServletActionContext.getServletContext().getRealPath("/img/postImg");   //设置保存目录

        String fileName =java.util.UUID.randomUUID(); //采用UUID的方式随机命名

        fileName+= uploadFileName.substring(uploadFileName.length() - 4);

        File toFile = new File(uploadPath, fileName);

        OutputStream os = new FileOutputStream(toFile);  

        byte[] buffer = new byte[1024];  

        int length = 0;

        while ((length = is.read(buffer)) > 0) {  

          os.write(buffer, 0, length);  

        }  

        is.close();

        os.close();

       这段代码是Struts 2上传图片的核心代码，把图片上传后保存在项目的某个目录下，并随机重命名。
     ⑥ 图片上传成功，在目录下也可以看到图片，至此图片上传成功。
        到这里，要在Action中加入一段JS。

        String callback =ServletActionContext.getRequest().getParameter("CKEditorFuncNum");

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

        out.println("window.parent.CKEDITOR.tools.callFunction("+ callback + ",'" +"img/postImg/"+ fileName + "','')");

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

        有了这段代码，图片上传成功后，根据这里的

        "img/postImg/" + filename

        相对地址，就可以使用这个图片，直接转到“图像”页面