CKeditor如何实现图片上传功能

第一步:工具下载

 

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

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

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

 

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

 

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

第二部:在myeclipse10建立项目CKeditor

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

 

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

 

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

修改ckeditor文件夹下的config.js文件,代码如下:

 

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

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

解决办法

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

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

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

 

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

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

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

 

第二行的<enabled>false</enabled>换成:<enabled>true</enabled>

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

最后:在Webroot下的index.jsp文件中<head></head>中加入

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

 

第四步:看运行结果

选择浏览服务器可以看到

 

 

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

最后:去除版本信息

 

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

当想在WebRoot下建立admin后台管理时,如图:

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

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

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

indexTo.jsp代码如下:

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

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

 

 

 

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

你可能感兴趣的:(CKeditor如何实现图片上传功能)