fckeditor详解和瘦身（转载）

最新推荐文章于 2022-11-08 16:02:36 发布

原创最新推荐文章于 2022-11-08 16:02:36 发布 · 116 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#fckeditor #Servlet #JavaScript #Web #Qt #ViewUI

JAVASCRIPT 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍FCKeditor的安装及配置过程，包括软件包下载、项目集成、JS代码加入、文件上传设置、JSP集成、安全设置等。此外还介绍了如何进行文件重命名、设置文件大小、修改图标和工具栏，以及FCKeditor的精简方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

第一种方法

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

var oFCKeditor = new FCKeditor('FCKeditor1');

oFCKeditor.BasePath = "/fckeditor/";

oFCKeditor.Create();

</script>

</form>

第二种js方法

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

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

</form>

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-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-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瘦身