FCKeditor详解和瘦身方法

 

1.登陆官方网站下站如下软件包,并用MyEclipse建立web项目

http://www.fckeditor.net/

http://www.fckeditor.com

下载如下软件包并解压

FCKeditor_2.6.4.zip

fckeditor-java-2.4.1-bin.zip

fckeditor-java-2.4.1-src.zip

fckeditor-java-demo-2.4.1.war

 

2.在FCKeditor_2.6.4.zip压缩包中解庄出的fckeditor目录，复制到

项目中WebRoot目录下

 

3.js代码加入fckeditor

第一种方法

<script type="text/javascript" src="fckeditor/fckeditor.js"></script>

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

标题:<input type="text" name="title"/><br>

<script type="text/javascript">

var oFCKeditor = new FCKeditor('FCKeditor1');

oFCKeditor.BasePath = "/fckeditor/";

oFCKeditor.Create();

</script>

</form>

 

第二种js方法

<script type="text/javascript" src="fckeditor/fckeditor.js"></script>

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

标题:<input type="text" name="title"/><br>

内容:<textarea id="content" name="content"></textarea>

</form>

<script type="text/javascript">

window.onload = function(){

    var f = new FCKeditor( 'content' ) ;

    f.BasePath = "/fck/fckeditor/" ;

    f.ReplaceTextarea() ;

}

</script>

 

4.文件上传设置

复制官方案例lib中的所有jar文件到本项目中的lib目录.

复制官方案例classes中的所有文件到本项目中的classes目录.

复制官方案例web.xml的部分代码到，本项目的web.xml

 

lib目录下的jar文件

commons-fileupload-1.2.1.jar

commons-io-1.3.2.jar

java-core-2.4.1.jar

slf4j-api-1.5.2.jar

slf4j-simple-1.5.2.jar

 

classes目录下的属性文件

fckeditor.properties

log4j.properties

 

WEB-INF目录下的web.xml

 

<servlet>

<servlet-name>Connector</servlet-name>

<servlet-class>net.fckeditor.connector.ConnectorServlet</servlet-class>

<load-on-startup>1</load-on-startup>

</servlet>

 

<servlet-mapping>

<servlet-name>Connector</servlet-name>

<url-pattern>/fckeditor/editor/filemanager/connectors/*</url-pattern>

</servlet-mapping>

 

5.JSP 加入 FCKeditor

 

<%@ page language="java" pageEncoding="gbk"%>

<%@ taglib prefix="FCK" uri="http://java.fckeditor.net"%>

<FCK:editor instanceName="content" basePath="/fckeditor" value="" toolbarSet="MyStyle" height="300">

</FCK:editor>

 

6.安全设置

java-core-2.4.1.jar中找到

net.fckeditor.connector.ConnectorServlet.class并双击,然后点击Attach Source...按钮,关键源代码fckeditor-java-2.4.1-src.zip压缩包，就可以看到ConnectorServlet.java的官方源代码了.

 

建立源码包com，并建立MyConnector.java,把ConnectorServlet.java源码复制进来，进行修改

同时修改web.xml文件

<servlet>

<servlet-name>Connector</servlet-name>

<servlet-class>com.MyConnector</servlet-class>

<load-on-startup>1</load-on-startup>

</servlet>

 

找到

if (!RequestCycleHandler.isEnabledForFileUpload(request))

ur = new UploadResponse(UploadResponse.SC_SECURITY_ERROR, null,

null, Messages.NOT_AUTHORIZED_FOR_UPLOAD);

 

前边加入

 

if(request.getSession().getAttribute("user")==null)

   ur = new UploadResponse(555);

else 

代码，就安全了。

 

 

7.文件重新命名

解决中文问题

找到doPost方法加入

request.setCharacterEncoding("UTF-8");

 

还有有时候会设置Tomcat\conf\server.xml 加入 URIEncoding="UTF-8|GBK|GB2312"

 

找到String extension = FilenameUtils.getExtension(filename);

加入如下代码，可以使用全球唯一算法

filename = UUID.randomUUID().toString()+"."+extension;

 

8.文件大小设置

 

找到如下代码位置

if (!ExtensionsHandler.isAllowed(resourceType, extension))

ur = new UploadResponse(UploadResponse.SC_INVALID_EXTENSION);

else {

 

修改如下，可以限制上传文件大小为50KB

if (!ExtensionsHandler.isAllowed(resourceType, extension))

ur = new UploadResponse(UploadResponse.SC_INVALID_EXTENSION);

else if(uplFile.getSize()>(1024*50)){

ur = new UploadResponse(888);

}else{

 

9.文件格式限制，图标修改

在MyConnector.java文件中的extension变量，可以直接控制所有文件上传的类型，也可以在

fckconfig.js文件控制文件类型

FCKConfig.ImageBrowser = true ;

FCKConfig.ImageBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Type=Image&Connector=' + encodeURIComponent( FCKConfig.BasePath + 'filemanager/connectors/' + _FileBrowserLanguage + '/connector.' + _FileBrowserExtension ) ;

FCKConfig.ImageBrowserWindowWidth  = FCKConfig.ScreenWidth * 0.7 ; // 70% ;

FCKConfig.ImageBrowserWindowHeight = FCKConfig.ScreenHeight * 0.7 ; // 70% ;

 

FCKConfig.FlashBrowser = true ;

FCKConfig.FlashBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Type=Flash&Connector=' + encodeURIComponent( FCKConfig.BasePath + 'filemanager/connectors/' + _FileBrowserLanguage + '/connector.' + _FileBrowserExtension ) ;

FCKConfig.FlashBrowserWindowWidth  = FCKConfig.ScreenWidth * 0.7 ; //70% ;

FCKConfig.FlashBrowserWindowHeight = FCKConfig.ScreenHeight * 0.7 ; //70% ;

 

FCKConfig.LinkUpload = true ;

FCKConfig.LinkUploadURL = FCKConfig.BasePath + 'filemanager/connectors/' + _QuickUploadLanguage + '/upload.' + _QuickUploadExtension ;

FCKConfig.LinkUploadAllowedExtensions = ".(7z|aiff|asf|avi|bmp|csv|doc|fla|flv|gif|gz|gzip|jpeg|jpg|mid|mov|mp3|mp4|mpc|mpeg|mpg|ods|odt|pdf|png|ppt|pxd|qt|ram|rar|rm|rmi|rmvb|rtf|sdc|sitd|swf|sxc|sxw|tar|tgz|tif|tiff|txt|vsd|wav|wma|wmv|xls|xml|zip)$" ; // empty for all

FCKConfig.LinkUploadDeniedExtensions = "" ; // empty for no one

 

FCKConfig.ImageUpload = true ;

FCKConfig.ImageUploadURL = FCKConfig.BasePath + 'filemanager/connectors/' + _QuickUploadLanguage + '/upload.' + _QuickUploadExtension + '?Type=Image' ;

FCKConfig.ImageUploadAllowedExtensions = ".(jpg|gif|jpeg|png|bmp)$" ; // empty for all

FCKConfig.ImageUploadDeniedExtensions = "" ; // empty for no one

 

FCKConfig.FlashUpload = true ;

FCKConfig.FlashUploadURL = FCKConfig.BasePath + 'filemanager/connectors/' + _QuickUploadLanguage + '/upload.' + _QuickUploadExtension + '?Type=Flash' ;

FCKConfig.FlashUploadAllowedExtensions = ".(swf|flv)$" ; // empty for all

FCKConfig.FlashUploadDeniedExtensions = "" ; // empty for no one

 

10.修改图标，修改工具栏

在fckconfig.js的122号加入

FCKConfig.ToolbarSets["MyStyle"] = [

['Bold','Italic','-','Smiley','OrderedList','UnorderedList','-','Link','Unlink']

                              ] ;

来定制工具栏

 

定制图像

在fckconfig.js的319行左右可以修改头像图标,还要把图标文件复制到

/fck/WebRoot/fckeditor/editor/images/smiley目录下

 

 

 

11.为FCKeditor瘦身

(1)删除fckeditor目录下所有"下滑线开的文件或文件夹"

(2)fckeditor目录下，除js和xml文件，其它的文件全部删除

(3)删除skins目录下的除default外的目录.

(4)lang目录下除en.js\zh-cn.js文件，其它文件的全部删除

(5)删除目录connectors

 注意，其它WEB开发技术，不应该删除connectors目录，只有javaEE开发删除.

早用ckeditor了

请教楼上  ckeditor 跟 fckeditor 的关系是什么？

ckeditor 是 fckeditor的 改进版本

很好使用

楼上正解！

+1

想知道如何才能让直接复制图片进框子 而不需要上传按钮

用MooEditable的飘过。

用Dojo Editor的飘过

以前用fckeditor，正在学习ckeditor