以FCKeditor_2.6.3为例：
![]()
】
![]()
![]()
![]()
![]()
![]()
配置允许上传的文件类型：
![]()
![]()
修改允许上传文件的大小：
![]()
FCKeditor的主页：
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包：
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
2.
方法一：
创建并且输出 一个编辑器：
<script type="text/javascript" src="fckeditor/fckeditor.js">
var oFCKeditor = new FCKeditor('FCKeditor1');
oFCKeditor .BasePath ="/fckeditor/";
oFCKeditor.Create();
</script>
方法二：
用编辑器替换Textarea元素
<script type="text/javascript" src="fckeditor/fckeditor.js">
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>方法三：暂时没写》
3.
实例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head >
<title >test1.html</title >
<meta http-equiv= "keywords" content="keyword1,keyword2,keyword3" >
<meta http-equiv= "description" content="this is my page" >
<meta http-equiv= "content-type" content="text/html; charset=UTF-8" >
<!--<link rel=" stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="fckeditor/fckeditor.js" ></script>
</head >
<body >
<script type="text/javascript">
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 >
<title >test2.html</title >
<meta http-equiv= "keywords" content="keyword1,keyword2,keyword3" >
<meta http-equiv= "description" content="this is my page" >
<meta http-equiv= "content-type" content="text/html; charset=UTF-8" >
<!--<link rel=" stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="fckeditor/fckeditor.js" ></script>
<script type="text/javascript">
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的实例进行配置
：仅仅在当前的实例中生效
<script type="text/javascript" >
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文件中配置：
<!-- ~~~~~~~~~~~~ FCKeditor 有关配置 ~~~~~~~~~~~~~~~~~~ -->
<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 >
<!-- ~~~~~~~~~~~~~~ FCKeditor 有关配置结束 ~~~~~~~~~~~~~~~~~ -->
项目文件src下创建
fckeditor.properties：
connector.userActionImpl=net.fckeditor.requestcycle.impl.UserActionImpl
解决图片上传中文乱码问题：
1.post方式提交服务器，提交表单时按照页面编码对其内容进行编码
2.服务器端没有用正确的编码解码出错
分析：fckeditor--》editor--》filemanager--》browser--》default--》frmupload.html
查看该文件的：判断是否是
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
引用中文名的图片不能正常显示问题：
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);//引用自定义错误！
}