最近在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>
<typename="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>
<typename="Images">
<url>�SE_URL%images/</url>
<directory>�SE_DIR%images</directory>
<maxSize>0</maxSize>
<allowedExtensions>bmp,gif,jpeg,jpg,png</allowedExtensions>
<deniedExtensions></deniedExtensions>
</type>
<typename="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>
<paramname="smallThumb"value="90x90"></param>
<paramname="mediumThumb"value="120x120"></param>
<paramname="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. Forexample:
// 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，重新打开项目就可看到页面上编辑器的文本框，此时点击图像就可以上传了
如图:点击浏览按钮，选择要上传的图片，然后点击上传到服务器上，在图像一栏中可以调节图片大小和位置，点击确定即可完成上传功能
![[转载]java与ckeditor和ckfinder整合后实现上传图片功能](http://simg.sinajs.cn/blog7style/images/common/sg_trans.gif "[转载]java与ckeditor和ckfinder整合后实现上传图片功能")
