CKeditor 与 CKFinfer整合

阅读更多

CKeditor 下载地址:http://ckeditor.com/download 请下载 java版地
CKfinder 下载地址:http://ckfinder.com/download 也是java版地
首先配置 CKeditor ,从 FCKeditor 升级到CKeditor后 简单了很多,几步搞定
1.先下载好的文件,复制到Web-Root下,另不另加一个文件夹,随自己喜欢
2.复制好之后什么都不用动.
3.JSP文件头部引入: <%@ taglib uri="http://ckeditor.com" prefix="ckeditor" %>
4.具体调用:
这是一个测试

好了,这样就可以了.现在就可以使用了.
有几个需要注意的地方:
4.1.引入  需注意路径问题
4.2.ckeditor:标签中 <%=settings %> CKeditor的一些基本设置.如:
<%
CKEditorConfig settings = new CKEditorConfig();
//settings.addConfigValue("language", "ko"); //语言 国际化时可用.
settings.addConfigValue("width", "800");//宽度 
settings.addConfigValue("height", "200");//高度 
%>
这样就可以使用了,如需更高级的设置,可以参考官网的文档或例子.
CKFinder:
1.下载好后,此包里包含了 .war包,找到 WEB-INF下 config.xml 复制到自己的工程web-inf中.
打开web.xml,加入如下配置:(也可参考war 包下 web.xml中内容.我就是复制过来的)

  ConnectorServlet
com.ckfinder.connector.ConnectorServlet

XMLConfig
/WEB-INF/config.xml


debug
false

1


ConnectorServlet


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



FileUploadFilter
com.ckfinder.connector.FileUploadFilter
               
                    sessionCookieName
                    JSESSIONID
               
               
                    sessionParameterName
                    jsessionid
               


FileUploadFilter

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

注意:路问题,只要路径对了,就没有啥事.
config.xml中修改:

true 

/strutsToFckEdit/userfiles/ 



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


页面引用:参考war里的demo,代码如下:

    <%@ page language="java" contentType="text/html; charset=UTF-8" 
        pageEncoding="UTF-8"%> 
    <%@ taglib prefix="ckeditor" uri="http://ckeditor.com" %> 
     
     
     
     
     
     
     
     
     

     
     


好了,现在这二个都可以单独使用了.
现在说一下整合.
找到CKeditor 下的 config.js,加入如下代码:
//配置CKFinder 
    config.filebrowserBrowseUrl ='js_edit/ckfinder/ckfinder.html'; 
    config.filebrowserImageBrowseUrl ='js_edit/ckfinder/ckfinder.html?Type=Images'; 
    config.filebrowserFlashBrowseUrl = 'js_edit/ckfinder/ckfinder.html?Type=Flash'; 
    config.filebrowserUploadUrl = 'js_edit/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files'; 
    config.filebrowserImageUploadUrl = 'js_edit/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images'; 
    config.filebrowserFlashUploadUrl = 'js_edit/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash'; 
    config.filebrowserWindowHeight='50%';// 可以用像素
    config.filebrowserWindowWidth='70%';// 可以用像素

此处也需要注意路径问题.
完成了.这样二个就能够使用了.
最后说一下CKFinder ,这个东西是花钱地,不花钱的,网上可以找找破解的.
上传文件同名问题已经修改过了(原版的是上传的文件名等于保存的文件名.现在改为用时间重新命的).在附件里.
其它的就不多说了,下班了.
可以参考源码.
补充一下..这二个的设计可以是在一起设置的.
CKEditorConfig settings = new CKEditorConfig();
settings.addConfigValue("language", "ko"); //语言
设置语言的时候,CKFinder也随着改了.

• strutsToFckEdit.rar (4.9 MB)
• 下载次数: 7