在线编辑器

一、什么是FCKeditor

FCKeditor是一个专门使用在网页上的在线编辑器，属于开放源代码的所见即所得文字编辑器，可以让web程序拥有如MS Word这样强大的编辑功能。它志于轻量化，不需要太复杂的安装步骤即可使用。它可和PHP、JavaScript、ASP、ASP.NET、ColdFusion、Java、以及ABAP等不同的编程语言相结合。“FCKeditor”名称中的“FCK”是这个编辑器的作者的名字FredericoCaldeiraKnabben的缩写（弗雷德里科.卡尔代拉.克拉本）现已更名为CKeditor。

  CKeditor相容于绝大部分的网页浏览器，像是: Internet Explorer 5.5+(Windows)、MozillaFirefox 1.0+、Mozilla1.3+和 Netscape7+。在未来的版本也将会加入对Opera 的支援。

  CKeditor并不支持文件和图片上传，需要CKfinder插件的支持。

  网站新闻添加和编辑时要用到CKeditor。

二，得到CKeditor所需要的资源（所用到的资源可以在我的百度云盘里jsp框架（孙利的课）中下载）

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、解压ckfinder_java_2.1得到CKFinderJava.war并再次解压CKFinderJava.war得到CKFinderJava\ckfinder 文件夹，把ckfinder文件夹复制到WebRoot下面，然后删除ckfinder文件夹中以下划线开头的文件夹。

CKFinderJava\ckfinder

  3、解压ckeditor_3.6.2得到ckeditor_3.6.2\ckeditor，并复制ckeditor文件夹到WebRoot下面：

ckeditor_3.6.2/ckeditor

 4、复制CKFinder配置文件到工程项目的WEB-INF下面：

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

 5、复制\ckfinder\CKFinderJava\WEB-INF\lib下面文件夹下面所有jar文件到项目的WEB-INF/lib下面：

\ckfinder\CKFinderJava\WEB-INF\lib

6、解压ckeditor-java-3.6.2并复制ckeditor-java-3.6.2.war\WEB-INF\lib下面的文件ckeditor-java-core-3.5.3.jar到项目的

WEB-INF/lib下面：

ckeditor-java-3.6.2.war\WEB-INF\lib

7、删除无用的文件：

首先是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

8、修改的配置文件config.xml ，把文件中的第二、第四行改为：

<enabled>true</enabled>

<baseURL>/CKEditor_Finder/userfiles/</baseURL>

9、在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>/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 >   

10、修改ckeditor/config.js文件的内容（本质整合ckeditor和ckfinder）

用下面的内容覆盖源文件的全部内容 

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" ;  

}; 

11、编写Index.jsp实现编辑器的使用：

在index.jsp文件头添加如下代码：

 <%@  taglib  uri= "http://ckfinder.com"   prefix ="ckfinder"   %>  

<%@   taglib  uri= "http://ckeditor.com"   prefix ="ckeditor"   %>

在index.jsp的<body></body>中添加如下代码：

 <form   action ="ShowData.jsp"   method ="post">  

    <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/"  />

12、编写ShowData.jsp显示数据

<%

  request.setCharacterEncoding("gbk");

  String data = request.getParameter("editor1");

%>

<body>

  <h1>显示数据</h1> 

  <hr/><br/>

  <%=data%>

</body>

四、关于破解 

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

要替换的文件的位置：/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.注释这一部分，这样，在上传一中图片之后，中间就不会有提示了