CKEditor+CKFinder

来源：互联网发布：python line.split 编辑：程序博客网时间：2024/05/22 13:43

CKEditor+CKFinder控件的用法

一．需要的资源：

用到的网站，文件自己下载:

a) ckeditor_3.6.2 （解压）

download.cksource.com/CKEditor/CKEditor/CKEditor%203.6.2/ckeditor_3.6.2.zip

b) ckeditor-java-3.6.2 （解压）

download.cksource.com/CKEditor/CKEditor%20for%20Java/CKEditor%20for%20Java%203.6.2/ckeditor-java-3.6.2.war

c) ckfinder_java_2.1 （解压）

download.cksource.com/CKFinder/CKFinder%20for%20Java/2.1/ckfinder_java_2.1.zip

二．执行步骤：

1. MyEclipse新建 Web Project ： CKEditor_Finder

2. 复制以下文件夹到WebRoot 下面：

ckfinder_java_2.1\ckfinder\ CKFinderJava \ckfinder

注意：CKFinder 加粗的是 war 包解压后的文件夹的名称

ckeditor_3.6.2/ckeditor

3. 复制 CKFinder配置文件 到WEB-INF 下面：

ckfinder_java_2.1\ckfinder\CKFinderJava\WEB-INF\config.xml

4. 复制下面文件夹下面所有jar 文件到 WEB-INf/lib 下面：

ckfinder_java_2.1\ckfinder\CKFinderJava\WEB-INF\lib

ckeditor-java-3.6.2\WEB-INF\lib

三．下面删除无用的文件

首先是ckeditor 下面的文件：

_sample,_source, CHANGES.html， ckeditor_php4.php ， ckeditor_php5.php,

ckeditor.asp, ckeditor.pack, INSTALL.html, LICENSE.html

然后是ckfinder 下面的文件：

_samples, help, changelog.txt, install.txt, license.txt, translation.txt

四．修改配置文件config.xml

Xml代码  
< enabled > true </ enabled >  
< baseURL > /CKEditor_Finder/userfiles/ </ baseURL >   

五．在web.xml 中增加如下代码：

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 >/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 >/ckfinder/core/connector/java/connector.java</ url-pattern >  
</ filter-mapping >  
< session-config >  
< session-timeout > 10 </ session-timeout >  
</ session-config >   

六. 修改ckeditor/config.js文件的内容

Js代码  
CKEDITOR.editorConfig =  function (config) {  
    config.filebrowserBrowseUrl =  '/CKEditor_Finder/ckfinder/ckfinder.html' ;  
    config.filebrowserImageBrowseUrl =  '/CKEditor_Finder/ckfinder/ckfinder.html?type=Images' ;  
    config.filebrowserFlashBrowseUrl =  '/CKEditor_Finder/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' ;  
    config.filebrowserWindowWidth = '1000';  
    config.filebrowserWindowHeight = '700';  
    config.language =  "zh-cn" ;  
};   

七．修改index.jsp文件的内容如下：

Java代码  
<%@   page   language = "java"   import = "java.util.*"   pageEncoding = "utf-8" %>  
<%@   taglib   uri = "http://ckfinder.com"   prefix = "ckfinder"   %>  
<%@   taglib   uri = "http://ckeditor.com"   prefix = "ckeditor"   %>  
<%  
String path = request.getContextPath();  
String basePath = request.getScheme()+ "://" +request.getServerName()+ ":" +request.getServerPort()+path+ "/" ;  
%>  
<! DOCTYPE   HTML  PUBLIC   "-//W3C//DTD HTML 4.01 Transitional//EN">  
< html >  
   < head >  
     < base   href = " <%= basePath %> " >  
     < title > 首页 </ title >  
< meta   http-equiv = "pragma"   content = "no-cache" >  
< meta   http-equiv = "cache-control"   content = "no-cache" >  
< meta   http-equiv = "expires"   content = "0" >  
</ head >  
   < body >  
< form   action = "getContent"   method = "get" >  
    < textarea   cols = "80"   id = "editor1"   name = "editor1"   rows = "10" ></ textarea >  
    < input   type = "submit"   value = "Submit"   />  
</ form >  
< ckfinder:setupCKEditor   basePath = "/CKEditor_Finder/ckfinder/"   editor = "editor1"   />  
< ckeditor:replace   replace = "editor1"   basePath = "/CKEditor_Finder/ckeditor/"   />  
</ body >  
</ html >   

很可能或者可以说是肯定：您在访问之后操作的时候，不会像在我视频里面的那样顺利，尤其是关于中文问题，其中有一个重要的操作上面没有提及：
这个操作就是：找到Tomcat/config/server.xml
<Connector port="80" protocol="HTTP/1.1"
               connectionTimeout="20000"
               redirectPort="8443" URIEncoding="utf-8" />
这个设置中的URIEncoding 是为了在访问的时候,即使访问路径中出现中文也能正常访问. 如果还有其他问题,可以发贴继续交流一下^_^

关于破解：

替换预览图片方框的文字为：预览图片的位置。

要替换的文件的位置：/CKEditor_Finder/WebRoot/ckeditor/plugins/image/dialogs/image.js

Ckfinder.js 文件的修改：

1. CKEditer/config.js文件大括号最后添加：

config.image_previewText = "预览图片的位置！自己修改！！ ";

(以下修改的文件均为：ckfinder/ckfinder.js文件)

2. return a.bF.length > 0 && A.indexOf(a.bF.substr(0, 9)) != -1 改为return false;

3.注释这一部分，这样，在上传一中图片之后，中间就不会有提示了

Js代码  
/*if (!S && (!p || a.bs.indexOf(p) % 8 < 4)) { 
    P.mj = J; 
    S = 1; 
} 
if ((P.eu && !T || S) && P.mj) { 
     Q.addClass('files_message');   
     this.tools.of().setHtml(P.mj); 
}*/   

4. 注释掉这个部分：这样，左下角的东西就看不见了

Js代码  

/*if (!B)
this.dV().getChild(0).appendHtml(y || z || w != 4 ? r:
s+ "\074\x62\x3e"+
i.htmlEncode(a.ed)+
"\074\057\x62\076\074\x2f\x64\151\x76\x3e");*/

jsp页面：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  
<%  
    String path = request.getContextPath();  
    String basePath = request.getScheme() + "://"  
            + request.getServerName() + ":" + request.getServerPort()  
            + path + "/";  
%>  
  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
<head>  
<base href="<%=basePath%>">  
  
<title>添加新闻</title>  
  
<meta http-equiv="pragma" content="no-cache">  
<meta http-equiv="cache-control" content="no-cache">  
<meta http-equiv="expires" content="0">  
  
<script type="text/javascript" src="<%=basePath%>ckeditor/ckeditor.js"></script>  
<script type="text/javascript" src="<%=basePath%>ckfinder/ckfinder.js"></script>  
  
</head>  
  
<body>  
    <a href="<%=basePath%>jsp/index.jsp">返回首页</a> | <a href="<%=basePath%>jsp/viewNews.jsp">查看新闻</a>  
    <div>  
        <center><h2>添加新闻</h2></center>  
          
        <form name="form1" action="newsInfo" method="post">  
            <table style="width:1024px;height:auto;" border="0" cellspacing="10px;" cellpadding="5">  
                <tr>  
                    <td>标题：</td>  
                    <td><input type="text" value="" name="news.title"  
                       style="width:100%;height:28px;padding-left:5px; margin-top:3px;" />  
                    </td>  
                </tr>  
                <tr>  
                    <td valign="top">内容：</td>  
                    <td><textarea id="editor1" name="news.content" rows="5" cols="50"></textarea>  
                    </td>  
                </tr>  
                <tr>  
                    <td></td>  
                    <td></td>  
                </tr>  
                <tr>  
                    <td></td>  
                    <td><input type="submit" value="提交"  style="width:80px;height:25px;"/>  
                    </td>  
                </tr>  
            </table>  
  
        </form>  
    </div>  
      
 <script type="text/javascript">
//this is a check for the CKEditor class. If not defined,the paths must be checked.
if(typeof CKEDITOR=='undefined')
{
document.write(
'<strong><span style="color:#ff0000">Error</span>:CKEditor not found</strong>.'+
'this sample assumes that CKEditor(not included with CKFinder) is installed in'+
'the"/ckeditor/"path. If you have it installed in a different place,just edit'+
'this file,changing the wrong paths in the<head>(line 5)and the "BasePath"'+
'value(line32).'
);
}
else{
var editor = CKEDITOR.replace('editor1');
CKFinder.setupCKEditor(editor,'/ckfinder/');
//It is also possible to pass an object with selected CKFinder properties as a second argument.
//CKFinder.SetupCKEditor(editor,{BasePath:'../../',
RememberLastFolder:false});
}
</script>
</body>  
</html>  