ckeditor的使用（包含上传图片）

介绍

ckeditor新版本不能上传文件。
ckfinder可以上传文件图片，有版本之分，如果使用java语言就选择ckfinder-java

ckeditor的使用

使用ckeditor的步骤

1.添加ckeditor文件

2.在页面中引入js文件

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

3.编写js脚本替换textarea

<textarea  rows="25" cols="80" id="context" name="news.context"  class="form-control"   required >${formbean.news.context }</textarea>
                 <script type="text/javascript">
                        CKEDITOR.replace( 'context' );
                </script>

自定义工具栏

默认工具栏

上面默认工具栏的配置代码如下config.toolbar_Full：

讲解：

[]代表一组内容
‘Source’：源码
‘-’：竖线
‘/’ ：换行

配置自己的工具栏

达到如下效果：

1.在config.js中修改

如下效果

代码为：

config.toolbar= [
                        ['Paste'],
                        ["Bold","Italic","Underline"],
                        ["NumberedLisst","BulletedList","-","JustifyLeft","JustifyCenter","JustifyRight","JustfyBlock"],
                        ["Image"],
                        ["Styles","Format","Font","FontSize"],
                        ["TextColor","BGColor"],
                        ["Maximize"]
    ];  

上传图片

效果

• 选择上传图片

  • 修改文件宽和长

  • 显示效果

  原理和前提

  • 原理：ckeditor上传图片是先将图片上传到后台，后台再返回该图片的访问路径，表单提交后，是把该图片的路径保存到数据库中了。
  • 准备前提： 工具栏上要有添加图片的工具按钮，由于ckeditor的版本更新把上传文件功能分离到ckfinder中了，我用的ckeditor是老的版本，所以还具有上传图片功能。
    我使用的ckeditor版本下载地址如下：http://download.youkuaiyun.com/detail/zl594389970/9520872
    同样在jsp页面中引入

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

接收图片和查看图片方法

既然是上传图片，那么后台就要有接收图片的方法和查看图片的方法。

接收上传图片的方法

该方法的访问路径为:http://localhost:8080/test/control/news/uploadImage.action
方法的服务层代码没有给出

  /**
      * 上传图片
      * @param request
      * @param response
      * @param upload 上传文件
      * @return
      * @throws IOException
      */
    @RequestMapping(value="uploadImage")
    public String uploadImage(HttpServletRequest request,HttpServletResponse response, @RequestParam(value="upload")CommonsMultipartFile upload) throws IOException{
        String uploadFileName= upload.getOriginalFilename();
        String uploadContentType=upload.getContentType();
        //设置返回“图像”选项卡  
        String callback = request.getParameter("CKEditorFuncNum"); 
        String result = "";
      //对文件进行校验  
        if(upload==null || uploadContentType==null || uploadFileName==null){  
            result="<font color=\"red\" size=\"2\">*请选择上传文件</font>";
            returnResult(response, result);
            return null;  
        }  
        if(!BaseForm.validateImageFileType(uploadFileName, uploadContentType)){
            result="window.parent.CKEDITOR.tools.callFunction(" + callback + ",'" + "文件格式不正确（必须为.jpg/.gif/.bmp/.png文件）','');";
            returnResult(response, result);
            return null;  
        }  
        if(upload.getSize()> 600*1024){  
            result="window.parent.CKEDITOR.tools.callFunction(" + callback + ",'" + "文件大小不得大于600k','');";
            returnResult(response, result);
            return null;  
        }  

        //文件保存相对路径
        String relativeSavePath= SiteUtils.getRelativeSavePath("news.image");//相对路径，在数据表中存储
        //保存文件名称
        String saveFileName = WebUtils.getFileSaveName(uploadFileName);
        try {
            //保存文件
            BaseForm.saveFile(relativeSavePath, saveFileName, upload);
        } catch (Exception e) {
            e.printStackTrace();
            result="window.parent.CKEDITOR.tools.callFunction(" + callback + ",'" + "上传失败','');";
            returnResult(response, result);
            return null;  
        }

        String path = request.getContextPath();
        String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";
          //返回图片访问路径
        result="window.parent.CKEDITOR.tools.callFunction(" + callback + ",'"+basePath +"control/news/lookImage.action?savePath=/" +relativeSavePath+ saveFileName + "','')";
        returnResult(response, result);
        return null;  
    }  

/**
     * 上传图片返回结果
     * @param response
     * @param result 返回结果
     * @throws IOException
     */
    private void returnResult( HttpServletResponse response,String result) throws IOException{
        response.setCharacterEncoding("UTF-8");
        PrintWriter out = response.getWriter(); 
        out.println("<script type=\"text/javascript\">");  
        out.println(result); 
        out.println("</script>");
    }  

访问上传图片的方法
该方法的访问路径为:http://localhost:8080/test/control/news/lookImage.action

/**
     * 根据文件保存的相对路径查看图片
     * @param savePath 文件保存的相对路径
     * @param request
     * @param response
     * @return
     */
    @RequestMapping(value="lookImage")
    public String lookImage(String savePath,HttpServletRequest request,HttpServletResponse response){
        //1.获取文件系统的根路径:D:/Soft/wlxopensystem/
            String fileSystemRoot = SiteUtils.getFileSystemDir();
            //2.生成文件的绝对路径:D:/Soft/wlxopensystem/news/images/201604225555556984.jpg
            String fileSavePath = fileSystemRoot+savePath;
            //2.1获取文件资源
            Resource fileResource =fileService.getFileResource("file:"+fileSavePath);
            //查看图片
            BaseForm.lookImage(response, fileResource);
            return null;
    }  

配置config.js文件

上传方法和查看方法写完了，就需要在ckeditor中config.js文件中配置上传图片方法的路径，至于查看图片的方法，在上传成功后返回给页面端了就不需要配置了。

CKEDITOR.editorConfig = function( config ) {
    // Define changes to default configuration here. For example:
    // config.language = 'fr';
    // config.uiColor = '#000000';

    //工具栏的配置
    config.toolbar= [
                        ['Paste'],
                        ["Bold","Italic","Underline"],
                        ["NumberedLisst","BulletedList","-","JustifyLeft","JustifyCenter","JustifyRight","JustfyBlock"],
                        ["Image"],
                        ["Styles","Format","Font","FontSize"],
                        ["TextColor","BGColor"],
                        ["Maximize"]
    ];
    //配置文件上传方法的路径
    config.filebrowserUploadUrl="control/news/uploadImage.action";
    var pathName = window.document.location.pathname;
    //获取带"/"的项目名，如：/uimcardprj
    var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);
    config.filebrowserImageUploadUrl = projectName+'/control/news/uploadImage.action'; 

};  

结束