Struts2整合之CKeditor和CKfinder

阅读更多
先从官网上下载好最新的CKeditor和CKfinder包之后,解压ckeditor和ckfinder,把ckeditor和ckfinder放在同一个文件夹里面。如下图:

Struts2整合之CKeditor和CKfinder_第1张图片


然后开始整合Struts2和CKeditor
首先配置fck.xml文件,需要注意的是/Files/这里指的应用相对路径,如上图所示,而指的绝对路径。这里推荐使用相对路径,路径的作用是后面文件管理器读取文件时的路径。在后面的xml节点中还可以配置上传图片时加载哪个文件夹,加载其他文件加载文件夹名,还可以设置上传文件规定的后缀名,还有图片的长宽值,隐藏哪些文件夹,还有文件缩略图的大小参数等等。


	true
	
	/Files/
	
	
	1600
	1200
	80
	UTF-8
	false
        false
	CKFinder_UserRole
	true
	true
	true
	html,htm,xml,js
	
		.svn
		CVS
	
	
		.*
	
	
	
		
			%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
			
		
	
	
		
			*
			*
			/
			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




然后配置web.xml文件,这里servlet一定要配置在Struts2拦截器前面。



  Struts2_FCK
  
    default.jsp
  
  
  
    ConnectorServlet
    com.ckfinder.connector.ConnectorServlet
    
      XMLConfig
      /WEB-INF/ckfinder.xml
    
    
      debug
      false
    
    1
  
  
    ConnectorServlet
    
			/FckEditor/ckfinder/core/connector/java/connector.java
	
  
  
    10
  
   
  
    struts2Filter
    org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter
  
  
    struts2Filter
    /*
  



然后是配置个性化的ckeditor界面,而且要想集成ckfinder必须按下面配置ckeditor文件夹下的config.js文件:
CKEDITOR.editorConfig = function(config) {
	config.language = 'zh-cn';//配置语言 
	config.uiColor = '#FFF';//背景颜色 
	config.width = '800px';//宽度 
	config.height = '300px';//高度 
	config.skin = 'office2003';//编辑器皮肤样式: office2003
	//config.toolbar = "Full";  //工具栏样式 全能工具栏:Basic
	config.font_names = '宋体/宋体;黑体/黑体;仿宋/仿宋_GB2312;楷体/楷体_GB2312;隶书/隶书;幼圆/幼圆;' + config.font_names;

	 config.toolbar =
	  [
	  ['Source', 'Preview', '-'],
	  ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', ],
	  ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],
	  ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar','PageBreak'], '/',
	  ['Bold', 'Italic', 'Underline', '-', 'Subscript', 'Superscript'],
	  ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'],
	  ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
	  ['Link', 'Unlink', 'Anchor'],
	  '/',
	  ['Format', 'Font', 'FontSize'],
	  ['TextColor', 'BGColor'],
	  ['Maximize', 'ShowBlocks', '-', 'About']
	  ];
        //ckfinder配置
	config.filebrowserBrowseUrl = 'FckEditor/ckfinder/ckfinder.html';
	config.filebrowserImageBrowseUrl = 'FckEditor/ckfinder/ckfinder.html?type=Images';
	config.filebrowserFlashBrowseUrl = 'FckEditor/ckfinder/ckfinder.html?type=Flash';
	config.filebrowserUploadUrl = 'fileUpload?type=file';
	config.filebrowserImageUploadUrl = 'imageUpload?type=image';
	config.filebrowserFlashUploadUrl = 'flashUpload?type=flash';
	config.filebrowserWindowWidth = '800';
	config.filebrowserWindowHeight = '480';
};



Struts2整合之CKeditor和CKfinder_第2张图片

最后是破解ckfinder,因为ckfinder并不是免费的,所以需要破解才能得到所有功能和去除水印,在网上有很多方法,不过我这里已经整合好,完全免费而且无水印版本,在下面附件中下载。

JSP页面,其实有三种方法调用ckeditor,可以用他自己的标签库,也可以用css方法。我这里使用的是js加载,个人觉得在各浏览器最兼容。


FCK



    


Struts2整合之CKeditor和CKfinder_第3张图片

这里鼠标右键点击图片缩略图可以进行下载,如果破解权限后,还可以在文件夹之间互相拖动达到复制粘贴的目的。附件中我破解好的最新版本

当点击文件上传按钮时调用的action就是'imageUpload?type=image',然后结合我以前对struts2文件上传下载的博文中讲到的知识对文件数据进行组织,文件字段这里默认是upload字段,所以在后台可以通过这个字段得到文件类型,文件名和文件二进制数据,最后可以通过IO写入到其他文件夹或者存入数据库即可。
  • Struts2整合之CKeditor和CKfinder_第4张图片
  • 大小: 14.2 KB
  • Struts2整合之CKeditor和CKfinder_第5张图片
  • 大小: 28.7 KB
  • Struts2整合之CKeditor和CKfinder_第6张图片
  • 大小: 80.5 KB
  • ckeditor.rar (2.3 MB)
  • 下载次数: 122
  • ckfinder.rar (1.8 MB)
  • 下载次数: 131
  • 配置文件.rar (2.5 KB)
  • 下载次数: 83
  • 查看图片附件

你可能感兴趣的:(struts2,CKeditor,CKfinder,FCKEditor)