CKeditor 与 CKFinfer整合

suncf1985

浏览: 28885 次
性别:
来自: 哈尔滨

最近访客更多访客>>

luojianbing

阿布abu

烛影乱

wjf0334

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

fckeditor cdfinder

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.具体调用:
<textarea cols="30" id="editor1" name="editor1" rows="5">这是一个测试</textarea>
<ckeditor:replace replace="editor1" basePath="js_edit/ckeditor/" config="<%=settings %>"/>
好了,这样就可以了.现在就可以使用了.
有几个需要注意的地方:
4.1.引入<script type="text/javascript" src="js_edit/ckfinder/ckfinder.js"></script> 需注意路径问题
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中内容.我就是复制过来的)
<servlet>
<servlet-name>ConnectorServlet</servlet-name>
<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>
<param-name>debug</param-name>
<param-value>false</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>ConnectorServlet</servlet-name>
<url-pattern>

/js_edit/ckfinder/core/connector/java/connector.java
</url-pattern>
</servlet-mapping>
<filter>
<filter-name>FileUploadFilter</filter-name>
<filter-class>com.ckfinder.connector.FileUploadFilter</filter-class>
                <init-param>
                    <param-name>sessionCookieName</param-name>
                    <param-value>JSESSIONID</param-value>
                </init-param>
                <init-param>
                    <param-name>sessionParameterName</param-name>
                    <param-value>jsessionid</param-value>
                </init-param>
</filter>
<filter-mapping>
<filter-name>FileUploadFilter</filter-name>
<url-pattern>
/js_edit/ckfinder/core/connector/java/connector.java
     </url-pattern>
</filter-mapping>
注意:路问题,只要路径对了,就没有啥事.
config.xml中修改:
<config>
<enabled>true</enabled>
<baseDir></baseDir>
<baseURL>/strutsToFckEdit/userfiles/</baseURL>

<licenseKey></licenseKey>
<licenseName></licenseName>
<imgWidth>1600</imgWidth>
<imgHeight>1200</imgHeight>
<imgQuality>80</imgQuality>
<uriEncoding>UTF-8</uriEncoding>
<forceASCII>false</forceASCII>
        <disallowUnsafeCharacters>false</disallowUnsafeCharacters>
<userRoleSessionVar>CKFinder_UserRole</userRoleSessionVar>
<checkDoubleExtension>true</checkDoubleExtension>
<checkSizeAfterScaling>true</checkSizeAfterScaling>
<secureImageUploads>true</secureImageUploads>
<htmlExtensions>html,htm,xml,js</htmlExtensions>
<hideFolders>
<folder>.svn</folder>
<folder>CVS</folder>
</hideFolders>
<hideFiles>
<file>.*</file>
</hideFiles>
<defaultResourceTypes></defaultResourceTypes>
<types>
<type name="Files">
<url>%BASE_URL%files/</url>
<directory>%BASE_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,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
</allowedExtensions>
<deniedExtensions></deniedExtensions>
</type>
<type name="Images">
<url>%BASE_URL%images/</url>
<directory>%BASE_DIR%images</directory>
<maxSize>0</maxSize>
<allowedExtensions>bmp,gif,jpeg,jpg,png</allowedExtensions>
<deniedExtensions></deniedExtensions>
</type>
<type name="Flash">
<url>%BASE_URL%flash/</url>
<directory>%BASE_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>%BASE_URL%_thumbs/</url>
<directory>%BASE_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>

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

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <%@ taglib prefix="ckeditor" uri="http://ckeditor.com" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>first use of CKFinder</title>
    <link type="text/css" rel="stylesheet" href="js_edit/ckfinder/skins/kama/app.css" mce_href="js_edit/ckfinder/skins/kama/app.css" />
    <script type="text/javascript" src="js_edit/ckfinder/ckfinder.js" mce_src="js_edit/ckfinder/ckfinder.js"></script>
    </head>
    <body>
<p style="padding-left: 30px; padding-right: 30px;">
<script type="text/javascript">

// This is a sample function which is called when a file is selected in CKFinder.
function showFileInfo( fileUrl, data, allFiles )
{
var msg = 'The last selected file is: <a href="' + fileUrl + '">' + fileUrl + '</a><br /><br />';
// Display additional information available in the "data" object.
// For example, the size of a file (in KB) is available in the data["fileSize"] variable.
if ( fileUrl != data['fileUrl'] )
msg += '<b>File url:</b> ' + data['fileUrl'] + '<br />';
msg += '<b>File size:</b> ' + data['fileSize'] + 'KB<br />';
msg += '<b>Last modified:</b> ' + data['fileDate'];

if ( allFiles.length > 1 )
{
msg += '<br /><br /><b>Selected files:</b><br /><br />';
msg += '<ul style="padding-left:20px">';
for ( var i = 0 ; i < allFiles.length ; i++ )
{
// See also allFiles[i].url
msg += '<li>' + allFiles[i].data['fileUrl'] + ' (' + allFiles[i].data['fileSize'] + 'KB)</li>';
}
msg += '</ul>';
}
// this = CKFinderAPI object
this.openMsgDialog( "Selected file", msg );
}

// You can use the "CKFinder" class to render CKFinder in a page:
var finder = new CKFinder();
// The path for the installation of CKFinder (default = "/ckfinder/").
finder.basePath = '../';
// The default height is 400.
finder.height = 600;
// This is a sample function which is called when a file is selected in CKFinder.
finder.selectActionFunction = showFileInfo;
finder.create();

// It can also be done in a single line, calling the "static"
// create( basePath, width, height, selectActionFunction ) function:
// CKFinder.create( '../', null, null, showFileInfo );

// The "create" function can also accept an object as the only argument.
// CKFinder.create( { basePath : '../', selectActionFunction : showFileInfo } );

</script>
</p>
    </body>
    </html>

好了,现在这二个都可以单独使用了.
现在说一下整合.
找到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也随着改了.