第一步：工具下载

 

 本人使用的开发工具为myeclipse10，服务器为apache-tomcat-6.0.30

首先进入CKeditor和CKfinder官网下载所需工具包

进入CKeditor下载地址：http://ckeditor.com/download

 

CKeditor如何实现图片上传功能_第1张图片

进入CKfinder下载地址：http://ckfinder.com/download

 

CKeditor如何实现图片上传功能_第2张图片

下载成功后包为： ckeditor_3.6.5.zip ckfinder_java_2.3.zip 这是最新版，若以后有更新，只需下载新版即可，步骤不变哦！

第二部：在myeclipse10建立项目CKeditor

右键单击new一个webproject，输入所建立的项目名CKeditor如图所示：

CKeditor如何实现图片上传功能_第3张图片

 

第三部：将ckeditor和ckfinder整合到项目中

 

1、先解压 ckeditor_3.6.5.zip ，解压文件全部拷到webroot下面，结构如下图所示：

CKeditor如何实现图片上传功能_第4张图片

修改ckeditor文件夹下的config.js文件，代码如下：

 

   
   
   
   
    
    
    
    
    
  1.  
    2. 
    
    
    
    
  2. {  
    3. 
    
    
    
    
  3.     // Define changes to default configuration here. For example:  
    4. 
    
    
    
    
  4.     // config.language = 'fr';  
    5. 
    
    
    
    
  5.     // config.uiColor = '#AADC6E';  
    6. 
    
    
    
    
  6.     //配置默认配置   
    7. 
    
    
    
    
  7.      config.language = 'zh-cn'; //配置语言   
    8. 
    
    
    
    
  8.      // config.uiColor = '#FFF'; //背景颜色   
    9. 
    
    
    
    
  9.      // config.width = 400; //宽度   
    10. 
    
    
    
    
  10.      // config.height = 400; //高度   
    11. 
    
    
    
    
  11.      // config.skin = 'v2'; //编辑器皮肤样式   
    12. 
    
    
    
    
  12.      // 取消 “拖拽以改变尺寸”功能   
    13. 
    
    
    
    
  13.      // config.resize_enabled = false;   
    14. 
    
    
    
    
  14.      // 使用基础工具栏   
    15. 
    
    
    
    
  15.      // config.toolbar = "Basic";   
    16. 
    
    
    
    
  16.      // 使用全能工具栏   
    17. 
    
    
    
    
  17.      config.toolbar = "Full";   
    18. 
    
    
    
    
  18.      //使用自定义工具栏   
    19. 
    
    
    
    
  19.      // config.toolbar =   
    20. 
    
    
    
    
  20.      // [   
    21. 
    
    
    
    
  21.      // ['Source', 'Preview', '-'],   
    22. 
    
    
    
    
  22.      // ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', ],   
    23. 
    
    
    
    
  23.      // ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],   
    24. 
    
    
    
    
  24.      // ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', SpecialChar','PageBreak'],   
    25. 
    
    
    
    
  25.      // '/',   
    26. 
    
    
    
    
  26.      // ['Bold', 'Italic', 'Underline', '-', 'Subscript', 'Superscript'],   
    27. 
    
    
    
    
  27.      // ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'],   
    28. 
    
    
    
    
  28.      // ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],   
    29. 
    
    
    
    
  29.      // ['Link', 'Unlink', 'Anchor'],   
    30. 
    
    
    
    
  30.      // '/',   
    31. 
    
    
    
    
  31.      // ['Format', 'Font', 'FontSize'],   
    32. 
    
    
    
    
  32.      // ['TextColor', 'BGColor'],   
    33. 
    
    
    
    
  33.      // ['Maximize', 'ShowBlocks', '-', 'About']   
    34. 
    
    
    
    
  34.      // ];  
    35. 
    
    
    
    
  35.      // 在 CKEditor 中集成 CKFinder，注意 ckfinder 的路径选择要正确。   
    36. 
    
    
    
    
  36.      config.filebrowserBrowseUrl = 'ckfinder/ckfinder.html',  
    37. 
    
    
    
    
  37.      config.filebrowserImageBrowseUrl = 'ckfinder/ckfinder.html?type=Images',  
    38. 
    
    
    
    
  38.      config.filebrowserFlashBrowseUrl = 'ckfinder/ckfinder.html?type=Flash',  
    39. 
    
    
    
    
  39.      config.filebrowserUploadUrl = 'ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files',  
    40. 
    
    
    
    
  40.      config.filebrowserImageUploadUrl = 'ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images',  
    41. 
    
    
    
    
  41.      config.filebrowserFlashUploadUrl = 'ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash',  
    42. 
    
    
    
    
  42.      config.filebrowserWindowWidth = '1000',  
    43. 
    
    
    
    
  43.      config.filebrowserWindowHeight = '700' 
    44. 
    
    
    
    
  44. }; 
    45.
2、接着解压： ckfinder_java_2.3.zip ，将ckfinder_java_2.3./ckfinder下的 CKFinderJava.war（通过微软winrAR可以进行解压)再次解压，找到CKFinderJava下的ckfinder文件夹，将其拷贝到WebRoot根目录下，目录结构如下图所示：
 

CKeditor如何实现图片上传功能_第5张图片

此处出现两处错误：其中_samples文件夹可以直接删除，而jquery.min.js出错，是因为采用了压缩（缩小版）的jquery库，不被识别。

解决办法：

我们可以将 jquery.min.js文件删除，到jquery官网重新下载个完整版的，
下载地址： http://code.jquery.com/index.html  

CKeditor如何实现图片上传功能_第6张图片

选择jquery-1.7.1.js，右击链接另存为到你想要放置的路径。将该文件重新命名为jquery.min.js放到原来文件所在的位置，刷新项目，错误就这么轻易的解决了！

然后整合jar包，到刚才的war包，

 

CKeditor如何实现图片上传功能_第7张图片

将jar包全部拷贝放到项目WebRoot --> WEB-INF --> lib下

接着把配置文件：config.xml、web.xml（直接替换掉原来的web.xml即可)也拷贝到WebRoot/WEB-INF下

接着找到config.xml进行修改：

 

CKeditor如何实现图片上传功能_第8张图片

第二行的false换成：true

   
   
   
   
    
    
    
    
    
  1. 第四行的<baseURL>/CKFinderJava/userfiles/baseURL> 
    2. 
    
    
    
    
  2.  
    3. 
    
    
    
    
  3. 换成<baseURL>/CKeditor/userfiles/baseURL> 
    4. 
    
    
    
    
  4. 注意：此处的CKeditor是根据你的项目名定的，大小写注意些准确，否则将会出现错误，记住哦。 
    5.

最后：在Webroot下的index.jsp文件中中加入

 

 CKeditor如何实现图片上传功能_第9张图片

第四步：看运行结果

CKeditor如何实现图片上传功能_第10张图片

选择浏览服务器可以看到

 

CKeditor如何实现图片上传功能_第11张图片

 

选择图像属性，可以实现上传，选择flash属性，可以上传flv文件，特别实用。

最后：去除版本信息

 

打开ckfinder下面的ckfinder.js文件，查找此标签上添加隐藏样式style='display:none;'

当想在WebRoot下建立admin后台管理时，如图：

CKeditor如何实现图片上传功能_第12张图片

在WEB-INF下面的lib导入包如下：

CKeditor如何实现图片上传功能_第13张图片

此时admin文件夹下的index.jsp代码如下：

   
   
   
   
    
    
    
    
    
  1. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 
    2. 
    
    
    
    
  2. <%@ taglib uri="http://ckeditor.com" prefix="ckeditor"%>     
    3. 
    
    
    
    
  3. <%@ taglib uri="http://ckfinder.com" prefix="ckfinder"%> 
    4. 
    
    
    
    
  4. > 
    5. 
    
    
    
    
  5. <html> 
    6. 
    
    
    
    
  6. <head> 
    7. 
    
    
    
    
  7. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    8. 
    
    
    
    
  8. <title>首页title> 
    9. 
    
    
    
    
  9.  
    10. 
    
    
    
    
  10. head> 
    11. 
    
    
    
    
  11. <body> 
    12. 
    
    
    
    
  12.     <form action="indexTo.jsp" method="post"> 
    13. 
    
    
    
    
  13.         <table style="margin-top: 30px;"> 
    14. 
    
    
    
    
  14.             <tr> 
    15. 
    
    
    
    
  15.                 <td align="right"><font color="#FF0000">*font>标题：td> 
    16. 
    
    
    
    
  16.                 <td align="left"><input type="text" name="title" id="title" size="120" maxlength="30"/>td> 
    17. 
    
    
    
    
  17.             tr> 
    18. 
    
    
    
    
  18.             <tr>   
    19. 
    
    
    
    
  19.                 <td colspan="2"> td> 
    20. 
    
    
    
    
  20.             tr> 
    21. 
    
    
    
    
  21.             <tr> 
    22. 
    
    
    
    
  22.                 <td align="right"><font color="#FF0000">*font>内容：td> 
    23. 
    
    
    
    
  23.                 <td align="left"> 
    24. 
    
    
    
    
  24.                     <ckfinder:setupCKEditor editor="content" basePath="../ckfinder/" />     
    25. 
    
    
    
    
  25.                         <ckeditor:editor basePath="../ckeditor/" editor="content"  value="asasfasf" />   
    26. 
    
    
    
    
  26.                 td> 
    27. 
    
    
    
    
  27.             tr> 
    28. 
    
    
    
    
  28.             <tr> 
    29. 
    
    
    
    
  29.                 <td colspan="2"><input type="hidden" name="cid" value="1"> td> 
    30. 
    
    
    
    
  30.             tr> 
    31. 
    
    
    
    
  31.             <tr> 
    32. 
    
    
    
    
  32.                 <td colspan="2" align="right"> 
    33. 
    
    
    
    
  33.                     <input type="submit" value="提交" "/>    
    34. 
    
    
    
    
  34.                     <input type="button" value="返回" onclick="history.go(-1)"/> 
    35. 
    
    
    
    
  35.                 td> 
    36. 
    
    
    
    
  36.             tr> 
    37. 
    
    
    
    
  37.         table> 
    38. 
    
    
    
    
  38.     form> 
    39. 
    
    
    
    
  39. body> 
    40. 
    
    
    
    
  40. html> 
    41.

indexTo.jsp代码如下：

   
   
   
   
    
    
    
    
    
  1. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 
    2. 
    
    
    
    
  2. <%@ taglib uri="http://ckeditor.com" prefix="ckeditor"%>     
    3. 
    
    
    
    
  3. <%@ taglib uri="http://ckfinder.com" prefix="ckfinder"%> 
    4. 
    
    
    
    
  4. > 
    5. 
    
    
    
    
  5. <html> 
    6. 
    
    
    
    
  6. <head> 
    7. 
    
    
    
    
  7. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    8. 
    
    
    
    
  8. <title>首页title> 
    9. 
    
    
    
    
  9.  
    10. 
    
    
    
    
  10. head> 
    11. 
    
    
    
    
  11. <body> 
    12. 
    
    
    
    
  12.     <form action="IndexTo.jsp" method="post"> 
    13. 
    
    
    
    
  13.         <table style="margin-top: 30px;"> 
    14. 
    
    
    
    
  14.               
    15. 
    
    
    
    
  15.             <tr> 
    16. 
    
    
    
    
  16.             <%  
    17. 
    
    
    
    
  17.                     String content = request.getParameter("content");  
    18. 
    
    
    
    
  18.             %> 
    19. 
    
    
    
    
  19.               
    20. 
    
    
    
    
  20.                 <td align="right"><font color="#FF0000">*font>内容：td> 
    21. 
    
    
    
    
  21.                 <td align="left"> 
    22. 
    
    
    
    
  22.                     <ckfinder:setupCKEditor editor="content" basePath="../ckfinder/" />     
    23. 
    
    
    
    
  23.                         <ckeditor:editor basePath="../ckeditor/" editor="content"  value="<%=content %>"/>   
    24. 
    
    
    
    
  24.                 td> 
    25. 
    
    
    
    
  25.             tr> 
    26. 
    
    
    
    
  26.             <tr> 
    27. 
    
    
    
    
  27.                 <td colspan="2"><input type="hidden" name="cid" value="1"> td> 
    28. 
    
    
    
    
  28.             tr> 
    29. 
    
    
    
    
  29.             <tr> 
    30. 
    
    
    
    
  30.                 <td colspan="2" align="right"> 
    31. 
    
    
    
    
  31.                     <input type="submit" value="提交" "/>    
    32. 
    
    
    
    
  32.                     <input type="button" value="返回" onclick="history.go(-1)"/> 
    33. 
    
    
    
    
  33.                 td> 
    34. 
    
    
    
    
  34.             tr> 
    35. 
    
    
    
    
  35.         table> 
    36. 
    
    
    
    
  36.     form> 
    37. 
    
    
    
    
  37. body> 
    38. 
    
    
    
    
  38. html> 
    39.

至此，大功告成，大神略过，希望能对你有点用，亲！

 

 

 

   
   
   
   
    
    
    
    
    
  1. /*  
    2. 
    
    
    
    
  2. Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.  
    3. 
    
    
    
    
  3. For licensing, see LICENSE.html or http://ckeditor.com/license  
    4. 
    
    
    
    
  4. */ 
    5. 
    
    
    
    
  5.  
    6. 
    
    
    
    
  6. CKEDITOR.editorConfig = function( config )  
    7.