学步园

最近在java项目中要用到图片上传功能，因为之前没接触过ckeditor在线编辑器，在网上也搜索了很多例子和使用方法，结合自己的项目做了出来，在此总结出来，希望对大家有所帮助

1，下载ckeditor_3.6.2.zip和ckfinder_java_2.1.zip，然后分别解压出来为ckeditor文件和ckfinder文件，

2，把解压出来的文件复制放在项目中webRoot目录下（注：ckfinder是复制解压出来的ckfinder文件下的CKFinderJava.war再解压后的CKFinderJava文件目录下的）

 

3，在jsp页面导入js
<script type="text/javascript"
src="ckeditor/ckeditor.js"></script>

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

然后在jsp页面中引入在线编辑器

            
<textarea rows="20" cols="70" name="content"></textarea>

              
<script type="text/javascript">
                
if( CKEDITOR.instances['content']
){   //解决 例外被抛出且未被接住
问题  
                  
CKEDITOR.remove(CKEDITOR.instances['content']);   

                  
}    

              
   var editor
=CKEDITOR.replace("content");//引号中的字符串要和文本域中name的值一致
                
CKFinder.setupCKEditor(editor,'ckfinder/');
             

              
</script>

4，配置config.xml文件

<config>

 <!-- 开启上传功能，如果为false为提示
 ：因为安全原因，文件不可浏览. 请联系系统管理员并检查CKFinder配置文件.
 并且默认你是是为false的 -->
 <enabled>true</enabled>

 <!--
文件存放的地址   
/ckfinder/userfiles/   (自动创建)
-->
 <baseURL>/userfiles/</baseURL>

 
 
 <!--检查双扩展名  
-->
 <checkDoubleExtension>true</checkDoubleExtension>

 
 <!-- 在缩放后检查大小
-->
 <checkSizeAfterScaling>true</checkSizeAfterScaling>

 

 <!-- 配置路径以及格式
-->
 <types>
  <type
name="Files">
   <url>�SE_URL%files/</url>

   <directory>�SE_DIR%files</directory>

   <maxSize>0</maxSize>

   

<allowedExtensions>7z,aiff,asf,avi,bmp,csv,doc,docx,fla,flv,gif,gz,gzip,jpeg,jpg,mid,mov,mp3,mp4,mpc,mpeg,mpg,ods,odt,pdf,png,ppt,ppt

x,pxd,qt,ram,rar,rm,rmi,rmvb,rtf,sdc,sitd,swf,sxc,sxw,tar,tgz,tif,tiff,txt,vsd,wav,wma,wmv,xls,xlsx,zip

   </allowedExtensions>

   <deniedExtensions></deniedExtensions>

  </type>

  <type
name="Images">
   <url>�SE_URL%images/</url>

   <directory>�SE_DIR%images</directory>

   <maxSize>0</maxSize>

   <allowedExtensions>bmp,gif,jpeg,jpg,png</allowedExtensions>

   <deniedExtensions></deniedExtensions>

  </type>

  <type
name="Flash">
   <url>�SE_URL%flash/</url>

   <directory>�SE_DIR%flash</directory>

   <maxSize>0</maxSize>

   <allowedExtensions>swf,flv</allowedExtensions>

   <deniedExtensions></deniedExtensions>

  </type>

 </types>
 
 <!-- 
可允许的操作  -->
 <accessControls>

  <accessControl>

   <role>*</role>

   <resourceType>*</resourceType>

   <folder>/</folder>

   <folderView>true</folderView>

   <folderCreate>true</folderCreate>

   <folderRename>true</folderRename>

   <folderDelete>true</folderDelete>

   <fileView>true</fileView>

   <fileUpload>true</fileUpload>

   <fileRename>true</fileRename>

   <fileDelete>true</fileDelete>

  </accessControl>

 </accessControls>

 <thumbs>
  <enabled>true</enabled>

  <url>�SE_URL%_thumbs/</url>

  <directory>�SE_DIR%_thumbs</directory>

  <directAccess>false</directAccess>

  <maxHeight>100</maxHeight>

  <maxWidth>100</maxWidth>

  <quality>80</quality>

 </thumbs>
 
 <!-- 图片浏览——图片缩略图
-->
 <plugins>
  <plugin>

   <name>imageresize</name>

   <class>com.ckfinder.connector.plugins.ImageResize</class>

   <params>

    <param
name="smallThumb"
value="90x90"></param>

    <param
name="mediumThumb"
value="120x120"></param>

    <param
name="largeThumb"
value="180x180"></param>

   </params>

  </plugin>

  <plugin>

   <name>fileeditor</name>

   <class>com.ckfinder.connector.plugins.FileEditor</class>

   <params></params>

  </plugin>

 </plugins>
 <basePathBuilderImpl>com.ckfinder.connector.configuration.ConfigurationPathBuilder</basePathBuilderImpl>

</config>

5，配置web.xml文件
 <!--
=================ckeditor+ckfinder图片上传功能的配置===================
-->
  
<servlet>
  
  <!-- servlet的命
名===注册名称，这个名称可以任意的       
-->
  <servlet-name>ConnectorServlet</servlet-name>

  <!-- servlet
所在包  -->
  <servlet-class>com.ckfinder.connector.ConnectorServlet</servlet-class>

  <init-param>

   <!--
初始化设置 -->
   <param-name>XMLConfig</param-name>

   <param-value>/WEB-INF/config.xml</param-value>

  </init-param>

  <init-param>

   <!--
设置是否可以查看debug，在正常时候需要设置为false. -->
   <param-name>debug</param-name>

   <param-value>false</param-value>

  </init-param>

  
  <!--
  
  load-on-startup
元素在web应用启动的时候指定了
  servlet被加载的顺序，它的值必须是一个整数。
  如果它的值是一个负整数或是这个元素不存在，
  那么容器会在该servlet被调用的时候，加载这个servlet

  。如果值是正整数或零，容器在配置的时候就加载并初始化这个servlet，

  容器必须保证值小的先被加载。如果值相等，容器可以自动选择先加载谁。

  
  在此不是必须的
   -->
  <load-on-startup>1</load-on-startup>

 </servlet>
 
 <!--
映射的相对路径，主要是在其他地方使用，比如js,页面访问 
-->
 <servlet-mapping>

  <servlet-name>ConnectorServlet</servlet-name>

  <url-pattern>

   /ckfinder/core/connector/java/connector.java

  </url-pattern>

 </servlet-mapping>

<!--
=================ckeditor+ckfinder图片上传功能的配置结束===================
-->

6，导入需要的jar包，放在lib目录下，这些jar包可以在下载的ckeditor文件和ckfinder文件里找到，如果没找到，也可在网上下载

ckeditor-java-core-3.5.3.jar
CKFinder-2.1.jar
CKFinderPlugin-FileEditor-2.1.jar
CKFinderPlugin-ImageResize-2.1.jar
commons-fileupload-1.2.2.jar
commons-io-2.0.1.jar
Thumbnailator-0.3.10.jar

7，配置上传路径

在webRoot/ckeditor/config.js中加入下面的内容：

CKEDITOR.editorConfig = function( config )
{

//加入的内容

// Define changes to default configuration here. For
example:
 // config.language = 'fr';
 // config.uiColor = '#AADC6E';
 
 config.language = 'zh-cn'; // 配置语言
//
//   
config.uiColor = '#fff'; // 背景颜色
//
     
config.width = '800px'; // 宽度

     
config.height = '300px'; // 高度
//
//   
config.skin = 'office2003';// 界面v2,kama,office2003
//
//   
config.toolbar = 'Full';// 工具栏风格Full,Basic
//   
//   
config.font_names='宋体/宋体;黑体/黑体;仿宋/仿宋_GB2312;楷体/楷体_GB2312;' +
//   
'隶书/隶书;幼圆/幼圆;微软雅黑/微软雅黑;'+ config.font_names;

 //  config.htmlEncodeOutput =
true;
 //config.startupOutlineBlocks = false;

 config.filebrowserBrowseUrl =
'ckfinder/ckfinder.html';
   
config.filebrowserImageBrowseUrl =
'ckfinder/ckfinder.html?type=Images';
   
config.filebrowserFlashBrowseUrl =
'ckfinder/ckfinder.html?type=Flash';
   
config.filebrowserUploadUrl =
'ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files';

   
config.filebrowserImageUploadUrl =
'ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images';

   
config.filebrowserFlashUploadUrl =
'ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash';

 //---------------------------文件上传功能的配置结束--------

};

8，到此为止，java与ckeditor和ckfinder的配置已经完成，重启tomcat，重新打开项目就可看到页面上编辑器的文本框，此时点击图像就可以上传了

如图:点击浏览按钮，选择要上传的图片，然后点击上传到服务器上，在图像一栏中可以调节图片大小和位置，点击确定即可完成上传功能