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.csdn.net/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'; };  

结束