java与ckeditor和ckfinder整合后实现上传图片功能

java与ckeditor和ckfinder整合后实现上传图片功能

最近在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



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




4，配置config.xml文件




true


/userfiles/



true


true





%BASE_URL%files/
%BASE_DIR%files
0
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,pptx,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




%BASE_URL%images/
%BASE_DIR%images
0
bmp,gif,jpeg,jpg,png



%BASE_URL%flash/
%BASE_DIR%flash
0
swf,flv

cessControl>
*
*
/
true
true
true
true
true
true
true
true



true
%BASE_URL%_thumbs/
%BASE_DIR%_thumbs
false
100
100
80





imageresize
com.ckfinder.connector.plugins.ImageResize







fileeditor
com.ckfinder.connector.plugins.FileEditor



com.ckfinder.connector.configuration.ConfigurationPathBuilder



5，配置web.xml文件



ConnectorServlet

com.ckfinder.connector.ConnectorServlet


XMLConfig
/WEB-INF/config.xml



debug
false



1




ConnectorServlet

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





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:
// https://www.doczj.com/doc/367078569.html,nguage = 'fr';
// config.uiColor = '#AADC6E';

https://www.doczj.com/doc/367078569.html,nguage = '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，重新打开项目就可看到页面上编辑器的文本框，此时点击图像

可以上传了