CKFounder配置，使用

以FCKeditor_2.6.3为例：

FCKeditor的主页：

http://www.fckeditor.net

FCKeditor.zip

客户端：

FCKeditor_2.6.3.zip

需要服务器端支持：文件上传

FCKeditor.Java：

fckeditor-java-2.4-bin.zip

源码：

fckeditor-java-2.4-src.zip

演示工厂：

fckeditor-java-demo-2.4.war

使用时直接放到（正在运行的）Tomacat的webapps目录下即可。

访问：http://localhost:8080/fckeditor-java-2.4/

demo:

E:/../FCKeditor_2.6.3fckeditor\_samplesdefault.html

查看Demo源码时可以到：

工程里面的Jsp文件目录中查找相应的jsp文件。

首先，将FCKeditor_2.6.3解压后-->fckeditor-->拷到项目的web-Root目录下

-->安装fckeditor

调用方式：

1。通过Javascript调用

2. 在JSP中通过自定义标签调用

--->通过javascript调用：

demo:

E:/../FCKeditor_2.6.3fckeditor\_samplesdefault.html

右键查看源文件；

使用步骤：

1.引入jar包：

方法一：

创建并且输出一个编辑器：

var oFCKeditor = new FCKeditor('FCKeditor1');

oFCKeditor .BasePath ="/fckeditor/";

oFCKeditor.Create();

</script>

方法二：

用编辑器替换Textarea元素

window.onload=function(){

var oFCKeditor = new FCKeditor('MyTextarea');

oFCKeditor .BasePath ="/fckeditor/";

oFCKeditor.ReplaceTextarea();

}

</script>

IN<BODY> add the below code to replace an existing TEXTAREA in the page;

<textarea id="MyTextarea" > This is <b>the</b> initial value.</textarea>

方法三：

暂时没写》

实例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head >

</head >

<body >

var oFckeditor = new FCKeditor('FCKeditor1' );

oFckeditor .BasePath= "/FCKEditTest/fckeditor/" ;

oFckeditor.Create ();

</script>

</body >

</html>

FCKEditTest是项目名称

实例2：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head >

window.onload =function(){

var oFCKeditor = new FCKeditor( 'MyTextarea' );

oFCKeditor.BasePath ="fckeditor/";

oFCKeditor.ReplaceTextarea ();

}

</script>

</head >

<body >

<textarea rows="4" cols="60" name="MyTextarea" >this is value</ textarea>

</body >

</html>

4.总结：

1.BasePath要正确的设置

2.BasePath一定要以/结尾

】

--->在JSP中通过自定义标签调用

Congfiguration File 对所有的fckeditor有效

主jar包：

fackconfig.js 配置

一般我们使用额外的配置文件覆盖。

新建Myconfig.js配置文件

在fckconfig.js的

FCKEditTest：当前站点的位置

启用Myconfig.js配置文件

FCKConfig.CustomConfigurationsPath = '/FCKEditTest/MyConfig.js' ;

设置fckconfig.js中

FCKConfig .AutoDetectLanguage =true ;(会自动选用语言)

Myconfig.js中设置（会覆盖fckeditor.js中的该配置）

FCKConfig .AutoDetectLanguage =false ;

fckeditor 默认语言（英文）

FCKConfig.DefaultLanguage = 'en' ;

fckeditor 默认语言（法文）

FCKConfig .DefaultLanguage ='fr' ;

在页面的调用代码中对FCKeditor的实例进行配置

：仅仅在当前的实例中生效

var oFckeditor = new FCKeditor('FCKeditor1' );

oFckeditor .BasePath= "/FCKEditTest/fckeditor/" ;

oFckeditor.Config[ "CustomConfigurationsPath" ]="/FCKEditTest/MyConfig.js" ;

oFckeditor.Create ();

</script>

小结：

IE中Ctrl+F5 火狐中Shift+Ctrl+R

一般使用Fckeditor时需要修改一些配置：

1.自定义ToolbarSet（工具集），去掉一些功能

2.加上几种常用的字体（加上中文字体，宋体。）

3. 修改“回车”和“shift+回车”的换行行为

（默认回车隔行换，shift+回车才是换行）

4.修改编辑区的样式文件

5.更换表情图片

实例：

实现方法：

1.去掉一些功能：

config.js配置文件中默认有2中工具集：

FCKConfig.ToolbarSets[ "Default"] = [

['Source', 'DocProps','-' ,'Save', 'NewPage','Preview' ,'-', 'Templates'],

['Cut', 'Copy','Paste' ,'PasteText', 'PasteWord','-' ,'Print', 'SpellCheck'],

['Undo', 'Redo','-' ,'Find', 'Replace','-' ,'SelectAll', 'RemoveFormat'],

['Form', 'Checkbox','Radio' ,'TextField', 'Textarea','Select' ,'Button', 'ImageButton','HiddenField' ],

'/',

['Bold', 'Italic','Underline' ,'StrikeThrough', '-','Subscript' ,'Superscript'] ,

['OrderedList', 'UnorderedList','-' ,'Outdent', 'Indent','Blockquote' ,'CreateDiv'] ,

['JustifyLeft', 'JustifyCenter','JustifyRight' ,'JustifyFull'] ,

['Link', 'Unlink','Anchor' ],

['Image', 'Flash','Table' ,'Rule', 'Smiley','SpecialChar' ,'PageBreak'] ,

'/',

['Style', 'FontFormat','FontName' ,'FontSize'] ,

['TextColor', 'BGColor'],

['FitWindow', 'ShowBlocks','-' ,'About'] // No comma for the last row.

] ;

FCKConfig.ToolbarSets[ "Basic"] = [

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

] ;

可参考文档区别各个功能：

添加字体：MyConfig.js

FCKConfig.FontNames = '宋体;楷体_GB2312;黑体;隶书;Times New Roman;Arial' ;

修改键位：

FCKConfig.EnterMode = 'br' ; // p | div | br

FCKConfig .ShiftEnterMode = 'p' ; // p | div | br

表情图片：

//表情图片所在路径是文件夹

FCKConfig.SmileyPath = FCKConfig. BasePath + 'images/smiley/msn/' ;

//显示的图片

FCKConfig .SmileyImages = ['regular_smile.gif','sad_smile.gif' ,'wink_smile.gif', 'teeth_smile.gif','confused_smile.gif' ,'tounge_smile.gif', 'embaressed_smile.gif','omg_smile.gif' ,'whatchutalkingabout_smile.gif', 'angry_smile.gif','angel_smile.gif' ,'shades_smile.gif', 'devil_smile.gif','cry_smile.gif' ,'lightbulb.gif', 'thumbs_down.gif','thumbs_up.gif' ,'heart.gif', 'broken_heart.gif','kiss.gif' ,'envelope.gif'] ;

FCKConfig.SmileyColumns = 8 ;//每行显示的表情数目

FCKConfig.SmileyWindowWidth = 320 ;

FCKConfig.SmileyWindowHeight = 210 ;

图片框设置：

fckeditor-》》editor-》》dialog-- 》 --》//dialog.SetAutoSize( true ) ; //显示表情图片根据图片的大小修改当前窗口的大小

显示滚动条：

fckeditor-》》editor-》》dialog-- 》 --》body overflow:auto;

是否启用自己配置的MyConfig配置文件

FCKConfig.CustomConfigurationsPath =FCKConfig. EditorPath + 'MyConfig.js' ;

文件上传：

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 >

项目文件src下创建

fckeditor.properties：

connector.userActionImpl=net.fckeditor.requestcycle.impl.UserActionImpl

解决图片上传中文乱码问题：

1.post方式提交服务器，提交表单时按照页面编码对其内容进行编码

2.服务器端没有用正确的编码解码出错

分析：fckeditor--》editor--》filemanager--》browser--》default--》frmupload.html

查看该文件的：判断是否是

引用中文名的图片不能正常显示问题：

1. 配置解码方式：修改URIEncoding

可以对Tomacat服务器中的server.xml的

<Connector port ="8080" protcol="HTTP/1.1"

connectionTimeout="2000"

redirectPort="8443"

URIEncoding="UTF-8"

但是不推荐你使用，因为使用这种方式可能会导致网页中文参数解析问题。

2.避免出现引用中文名字图片的情况

修改上传文件的ConnectorServlet.java

public void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

logger.debug("Entering Connector#doPost");

response.setCharacterEncoding( "UTF-8");

response.setContentType( "text/html; charset=UTF-8");

response.setHeader( "Cache-Control", "no-cache");

PrintWriter out = response.getWriter();

String commandStr = request.getParameter("Command" );

String typeStr = request.getParameter("Type" );

String currentFolderStr = request.getParameter("CurrentFolder" );

logger.debug("Parameter Command: {}", commandStr);

logger.debug("Parameter Type: {}" , typeStr);

logger.debug("Parameter CurrentFolder: {}", currentFolderStr);

UploadResponse ur;

// if this is a QuickUpload request, 'commandStr' and 'currentFolderStr'

// are empty

if (Utils.isEmpty(commandStr) && Utils.isEmpty(currentFolderStr)) {

commandStr = "QuickUpload";

currentFolderStr = "/";

}

if (!RequestCycleHandler.isEnabledForFileUpload(request))

ur = new UploadResponse(UploadResponse.SC_SECURITY_ERROR , null, null,

Messages. NOT_AUTHORIZED_FOR_UPLOAD);

else if (!CommandHandler.isValidForPost(commandStr))

ur = new UploadResponse(UploadResponse.SC_ERROR , null, null , Messages.INVALID_COMMAND);

else if (typeStr != null && !ResourceTypeHandler.isValid(typeStr))

ur = new UploadResponse(UploadResponse.SC_ERROR , null, null , Messages.INVALID_TYPE);

else if (!UtilsFile.isValidPath(currentFolderStr))

ur = UploadResponse.UR_INVALID_CURRENT_FOLDER ;

else {

ResourceTypeHandler resourceType = ResourceTypeHandler.getDefaultResourceType(typeStr);

String typeDirPath = null;

if ("File" .equals(typeStr)) {

// 文件所存放的路径为 ${application.path}/WEB-INF/userfiles/

typeDirPath = getServletContext().getRealPath("WEB-INF/userfiles/" );

}

else {

String typePath = UtilsFile.constructServerSidePath(request, resourceType);

typeDirPath = getServletContext().getRealPath(typePath);

}

File typeDir = new File(typeDirPath);

UtilsFile. checkDirAndCreate(typeDir);

File currentDir = new File(typeDir, currentFolderStr);

if (!currentDir.exists())

ur = UploadResponse.UR_INVALID_CURRENT_FOLDER ;

else {

String newFilename = null;

FileItemFactory factory = new DiskFileItemFactory();

ServletFileUpload upload = new ServletFileUpload(factory);

upload.setHeaderEncoding( "UTF-8");

try {

List<FileItem> items = upload.parseRequest(request);

// We upload only one file at the same time

FileItem uplFile = items.get(0);

String rawName = UtilsFile.sanitizeFileName(uplFile.getName());

String filename = FilenameUtils.getName(rawName);

String baseName = FilenameUtils.removeExtension(filename);

String extension = FilenameUtils.getExtension(filename);

// 如果这个文件的扩展名不允许上传

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

ur = new UploadResponse(UploadResponse.SC_INVALID_EXTENSION );

}

// 如果文件大小超出限制

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

// 传递一个自定义的错误码

ur = new UploadResponse(204);

}

// 如果不存在以上情况, 则保存文件

else {

// construct an unique file name

// 使用 UUID 做为文件名, 并放到按照日期生成的文件夹中

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

filename = makeFileName(currentDir .getPath(), filename);

File pathToSave = new File(currentDir, filename);

int counter = 1;

while (pathToSave.exists()) {

newFilename = baseName.concat("(" ).concat(String.valueOf (counter))

.concat( ")").concat("." ).concat(extension);

pathToSave = new File(currentDir, newFilename);

counter++;

}

if (Utils.isEmpty(newFilename))

ur = new UploadResponse(UploadResponse.SC_OK , UtilsResponse

. constructResponseUrl(request, resourceType, currentFolderStr,

true, ConnectorHandler.isFullUrl()).concat(filename));

else

ur = new UploadResponse(UploadResponse.SC_RENAMED ,

UtilsResponse. constructResponseUrl(request, resourceType,

currentFolderStr, true, ConnectorHandler.isFullUrl())

.concat(newFilename), newFilename);

// secure image check

if (resourceType.equals(ResourceTypeHandler.IMAGE)

&& ConnectorHandler.isSecureImageUploads()) {

if (UtilsFile.isImage(uplFile.getInputStream()))

uplFile.write(pathToSave);

else {

uplFile.delete();

ur = new UploadResponse(UploadResponse.SC_INVALID_EXTENSION );

}

else

uplFile.write(pathToSave);

}

} catch (Exception e) {

ur = new UploadResponse(UploadResponse.SC_SECURITY_ERROR );

}

out.print(ur);

out.flush();

out.close();

logger.debug("Exiting Connector#doPost");

}

public static String makeFileName(String basePath, String filename) {

String subPath = sdf.format(new Date());

File dir = new File(basePath + "/" + subPath);

// 如果目录不存在, 就递归的创建, 已存在则不会重新创建

if (!dir.exists()) {

if (!dir.mkdirs()) {

throw new IllegalStateException("创建目录失败:" + dir.getPath());

}

String uuid = UUID.randomUUID().toString();

String extension = FilenameUtils.getExtension(filename);

return subPath + "/" + uuid + "." + extension;

}

配置允许上传的文件类型：

Connector 连接器的配置：

方式1：

配置允许上传的文件扩展名的列表

方式2：

配置禁止上传的文件扩展名的列表

默认使用第一种：

提供了4中文件类型所以有：

默认的配置文件在，fckeditor-java-core-2.4.jar 核心包中：

net.fckeditor.handlers (handlers操作者)-->default.properties 配置文件

通过在我们自己的fakeditor.properties中覆盖相应的属性：

修改允许上传文件的大小：

自定义错误：查看已经使用的错误ma：

fckeditor--> editor --> dialog --> fck_imgage --> fck_image.js

function OnUploadCompleted( errorNumber , fileUrl, fileName, customMsg )

{

// Remove animation

window.parent.Throbber .Hide () ;

GetE( 'divUpload' ).style .display = '' ;

switch ( errorNumber )

{

case 0 : // No errors

alert ( 'Your file has been successfully uploaded' ) ;

break ;

case 1 : // Custom error

alert ( customMsg ) ;

return ;

case 101 : // Custom warning

alert ( customMsg ) ;

break ;

case 201 :

alert ( 'A file with the same name is already available. The uploaded file has been renamed to "' + fileName + '"' ) ;

break ;

case 202 :

alert ( 'Invalid file type' ) ;

return ;

case 203 :

alert ( "Security error. You probably don't have enough permissions to upload. Please check your server." ) ;

return ;

case 204 ://自定义的错误回调

alert ( "文件大小超出上限." ) ;

return ;

case 500 :

alert ( 'The connector is disabled' ) ;

break ;

default :

alert ( 'Error on file upload. Error number: ' + errorNumber ) ;

return ;

}

sActualBrowser = '' ;

SetUrl( fileUrl ) ;

GetE('frmUpload' ).reset () ;

}

查找出已经使用的

ConnectorSeervlet.java 中配置

// 如果文件大小超出限制

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

// 传递一个自定义的错误码

ur = new UploadResponse(204);//引用自定义错误！

}