富编辑模块可以实现在线文档编辑功能，并动态上传插入image/falsh到文档中。本项目中，我们使用FCKeditor---著名的开源富编辑模块。要在我们的netjavaWeb项目中使用它，需要如下几步：
1.下载FCK模块：
首先，登陆http://www.fckeditor.net/ 下载FCKeditor的版本 FCKeditor_2.6.5.zip，及相关的jar包。
2.项目准备工作：
1.新建WEB工程netjavaFCKTest，将FCKeditor_2.6.5包中的fckeditor文件夹拷贝到项目的WEBContent文件夹下新。
2.将FCKeditor-Java-2.4.2-bin.zip 包中的fckeditor-java-core-2.4.2.jar、commons-fileupload-1.2.1.jar、commons-io-1.3.2.jar 以及slf4j-1.5.8.zip包中的slf4j-api-1.5.8.jar、slf4j-simple-1.5.8.jar文件拷贝到项目的 WebContent\WEB-INF\lib 目录
3.FCK配置：
1.调用FCK的方式：
1.通过JavaScript调用
内联方法（首选）：在网页内设置编辑器
Textarea的替代方法：在<head>中添加“onload”方法：
FCK属性：
[table]
|属性名| 描述| 默认值|
|Windth| 宽度| 100%|
|Height| 高度| 200|
|Value| 编辑器初始化内容| （空字符串）|
|ToolbarSet| 工具条集合的名称| （Default）[内置有default和basic，也可以自定义]|
|BasePath| 编辑器的基本路径| /fckeditor/
|
[/table]
FCK构造方法：
Var FCKeditor = function（instanceName,width,height,toolbarSet,value）;
instanceName为编辑器输出的textarea元素的name属性的值，必须指定参数会赋值给同名属性
2.JSP中自定义标签调用
在JSP中通过自定义标签调用FCKeditor：
2. 配置FCKedirot Myconfig.js
方法1：找到FCK主配置文件fckconfig.js，修改FCK的属性，此文件可以直接修改，一般不建议使用。
方法2：有一个更好的方法有同样的结果如上所述，但没有接触fckconfig.js文件；可以设置自定义配置的路径，直接在页面编辑器使用。
这是一个例子，在JavaScript中实现的：
1.建立一个配置文件myconfig.js
（1）.修改主配置文件fckconfig.js
（2）.建立一个独立的配置文件，只需要写修改的配置项 myconfig.js
（3）.在调用FCKeditor的时候使用：
配置加载顺序
1.加载主配置文件fckeditor.js
2.加载自定义的配置文件（如果有），覆盖相同的配置项
3.使用对实例的配置覆盖相同的配置项（只对当前实例有效）
提示：
1.系统会自动检测并运行适当的界面语言（默认，可以修改）
2.不能删除主配置文件fckconfig.js
3.修改配置后腰清空浏览器缓存，以免影响结果（或访问时强制刷新也可以）
添加一个数字或时间在自定义配置路径的结尾代码，强迫浏览器每次加载它：
3.需要修改的配置
1.自定义ToolbarSet,去掉一些功能
2.加上几种常用的字体
3.修改"回车"和"Shift+回车"的换行行为（ 默认的回车是一个段落）
4.修改编辑区样式文件 @import url（路径）;
5.更换表情图片
注意：
1.要使用UTF-8编码保存配置文件
2.FCKConfig.BasePath和调用fckeditor时指定的
BasePath（FCKeditor.BasePath）不是同一个，其值也不一样
4.文件上传
需求：
1.文件名为中文的文件时会出现乱码
2.创建中文目录名会出现乱码
3.引用中文名的图片不能正常显示
1.修改web.XML中的配置
2.重写FCK的ConnectorServlet文件
1.文件名为中文的文件时会出现乱码
在ConnectorServlet类的doPost方法中加上粗体部分代码。
2.创建中文目录名会出现乱码
在ConnectorServlet类的doGet方法中加上粗体部分代码。
3.引用中文名的图片不能正常显示
（1）.修改tomcat连接器的配置URIEncoding（建议不要使用，这个方法对Get方法进行的提交会对中文进行解码，有可能会产生乱码）。
原因是：图片引用的地址进行URL编码，当使用这个路径访问服务器时，先进行解码，这样就会解释成乱码，所以找不到对应的资源。
（2）.避免出现引用中文名字图片的情况，在ConnectorServlet类的doPost方法中加上粗体部分代码。
4. 控制上传文件的大小和自定义错误码
1.在上传文件的页面（浏览器）加载文件点击“Upload”按钮，将表单提交到ConnectorServlet（服务器），ConnectorServlet处理上传的文件（不同的处理结果对应不同的响应消息），ConnectorServlet通过处理的结果调用不同的回调函数，并传递错误码，对错误码进行处理。
打印错误码对应的提示信息步骤：
1.在服务器端的Servlet中，在保存文件之前先判断文件的大小，如果超出限制，就传递一个自定义的错误码，并且不再保存文件。在ConnectorServlet类的doPost方法中加上粗体部分代码。
2.修改对应的页面中的回调函数，增加对这个自定义的错误码的处理。在WebContenteditordialogfck_image文件夹下Fck_image.js文件中加上粗体部分代码。
[color=red][b]按照上边的步骤你就能看到你想要的结果了。[/b][/color]
1.下载FCK模块：
首先，登陆http://www.fckeditor.net/ 下载FCKeditor的版本 FCKeditor_2.6.5.zip，及相关的jar包。
2.项目准备工作：
1.新建WEB工程netjavaFCKTest，将FCKeditor_2.6.5包中的fckeditor文件夹拷贝到项目的WEBContent文件夹下新。
2.将FCKeditor-Java-2.4.2-bin.zip 包中的fckeditor-java-core-2.4.2.jar、commons-fileupload-1.2.1.jar、commons-io-1.3.2.jar 以及slf4j-1.5.8.zip包中的slf4j-api-1.5.8.jar、slf4j-simple-1.5.8.jar文件拷贝到项目的 WebContent\WEB-INF\lib 目录
3.FCK配置：
1.调用FCK的方式：
1.通过JavaScript调用
内联方法（首选）：在网页内设置编辑器
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- 第一件事要做的是将fckeditor.js集成到页面的<HEAD>就像这样： -->
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
</head>
<body>
<script type="text/javascript">
//新建一个FCK实例
var oFCKeditor = new FCKeditor（'FCKeditor1'）;
//设计编辑器的文件的路径
oFCKeditor.BasePath = "/FCKProject2.6.5/fckeditor/";
//创建并输出一个编辑器
oFCKeditor.Create（）;
</script>
</body>
</html>
Textarea的替代方法：在<head>中添加“onload”方法：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<!-- 第一件事要做的是将fckeditor.js集成到页面的<HEAD>就像这样： -->
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
<!-- 第二件事要做的是创建一个onload方法就像这样： -->
<script type="text/javascript">
window.onload = function（）{
var oFCKeditor = new FCKeditor（ 'MyTextarea' ） ;
oFCKeditor.BasePath = "/FCKProject2.6.5/fckeditor/" ;
oFCKeditor.ReplaceTextarea（） ;
}
</script>
</head>
<body>
<!-- Body部分添加如下代码： -->
<textarea id="MyTextarea" name="MyTextarea"></textarea>
</body>
</html>
FCK属性：
[table]
|属性名| 描述| 默认值|
|Windth| 宽度| 100%|
|Height| 高度| 200|
|Value| 编辑器初始化内容| （空字符串）|
|ToolbarSet| 工具条集合的名称| （Default）[内置有default和basic，也可以自定义]|
|BasePath| 编辑器的基本路径| /fckeditor/
|
[/table]
FCK构造方法：
Var FCKeditor = function（instanceName,width,height,toolbarSet,value）;
instanceName为编辑器输出的textarea元素的name属性的值，必须指定参数会赋值给同名属性
2.JSP中自定义标签调用
在JSP中通过自定义标签调用FCKeditor：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!-- 步骤1： 导入自定义标签库 -->
<%@ taglib uri="http://java.fckeditor.net" prefix="FCK" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head><body>
<!-- 步骤2： 在Body部分添加FCK标签： -->
<FCK:editor instanceName="EditorDefault" toolbarSet="Basic" width="50%" height="400" value="this is my test">
</FCK:editor>
</body></html>
2. 配置FCKedirot Myconfig.js
方法1：找到FCK主配置文件fckconfig.js，修改FCK的属性，此文件可以直接修改，一般不建议使用。
方法2：有一个更好的方法有同样的结果如上所述，但没有接触fckconfig.js文件；可以设置自定义配置的路径，直接在页面编辑器使用。
这是一个例子，在JavaScript中实现的：
1.建立一个配置文件myconfig.js
（1）.修改主配置文件fckconfig.js
FCKConfig.CustomConfigurationsPath = '/myconfig.js' ;（2）.建立一个独立的配置文件，只需要写修改的配置项 myconfig.js
（3）.在调用FCKeditor的时候使用：
var oFCKeditor = new FCKeditor（ "FCKeditor1" ） ;
oFCKeditor.Config["CustomConfigurationsPath"] = "/myconfig.js" ;
oFCKeditor.Create（） ;
配置加载顺序
1.加载主配置文件fckeditor.js
2.加载自定义的配置文件（如果有），覆盖相同的配置项
3.使用对实例的配置覆盖相同的配置项（只对当前实例有效）
提示：
1.系统会自动检测并运行适当的界面语言（默认，可以修改）
2.不能删除主配置文件fckconfig.js
3.修改配置后腰清空浏览器缓存，以免影响结果（或访问时强制刷新也可以）
添加一个数字或时间在自定义配置路径的结尾代码，强迫浏览器每次加载它：
var oFCKeditor = new FCKeditor（ "FCKeditor1" ） ;
oFCKeditor.Config["CustomConfigurationsPath"] = "/myconfig.js?" + （ new Date（） * 1 ） ;
oFCKeditor.Create（） ;
3.需要修改的配置
1.自定义ToolbarSet,去掉一些功能
2.加上几种常用的字体
3.修改"回车"和"Shift+回车"的换行行为（ 默认的回车是一个段落）
4.修改编辑区样式文件 @import url（路径）;
5.更换表情图片
注意：
1.要使用UTF-8编码保存配置文件
2.FCKConfig.BasePath和调用fckeditor时指定的
BasePath（FCKeditor.BasePath）不是同一个，其值也不一样
//设置语言，是否自动检测，默认为TRUE，此处设置为不自动检测，会覆盖默认的设置
FCKConfig.AutoDetectLanguage = true ;
//自定义ToolbarSet,去掉一些功能
FCKConfig.ToolbarSets["NetJava"] = [
['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.FontNames = '黑体;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;
//修改"回车"和"Shift+回车"的换行行为（ 默认的回车是一个段落）
FCKConfig.EnterMode = 'br' ; // p | div | br
FCKConfig.ShiftEnterMode = 'p' ; // p | div | br
//修改编辑区样式文件 ,在fck_editorarea.css中使用@import url（路径）
FCKConfig.EditorAreaCSS = FCKConfig.BasePath + 'css/fck_editorarea.css' ;
//更换表情图片;表情图片的位置
FCKConfig.SmileyPath = FCKConfig.BasePath + 'images/smiley/wangwang/' ;
//要显示的表情图片的名字
FCKConfig.SmileyImages = ['001.gif','002.gif','003.gif','004.gif','005.gif','006.gif','007.gif','008.gif','009.gif','010.gif','011.gif','012.gif','013.gif','014.gif','015.gif','016.gif','017.gif','018.gif','019.gif','020.gif','021.gif','022.gif','023.gif','024.gif','025.gif','026.gif','027.gif','028.gif','029.gif','030.gif'] ;
//每行显示多少个表情图片
FCKConfig.SmileyColumns = 5 ;
//显示表情图片的宽度
FCKConfig.SmileyWindowWidth = 435 ;
//显示表情图片的高度
FCKConfig.SmileyWindowHeight = 210 ;
4.文件上传
需求：
1.文件名为中文的文件时会出现乱码
2.创建中文目录名会出现乱码
3.引用中文名的图片不能正常显示
1.修改web.XML中的配置
<servlet>
<servlet-name>ConnectorServlet</servlet-name>
<servlet-class>
cn.netjava.fckeditor.ConnectorServlet
</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>ConnectorServlet</servlet-name>
<url-pattern>
/fckeditor/editor/filemanager/connectors/*
</url-pattern>
</servlet-mapping>
2.重写FCK的ConnectorServlet文件
1.文件名为中文的文件时会出现乱码
在ConnectorServlet类的doPost方法中加上粗体部分代码。
//……
if （!currentDir.exists（））
ur = UploadResponse.UR_INVALID_CURRENT_FOLDER;
else {
String newFilename = null;
FileItemFactory factory = new DiskFileItemFactory（）;
ServletFileUpload upload = new ServletFileUpload（factory）;
//设置编码为UTF-8
upload.setHeaderEncoding（"UTF-8"）;
try {
//……
2.创建中文目录名会出现乱码
在ConnectorServlet类的doGet方法中加上粗体部分代码。
//……
else if （command.equals（CommandHandler.CREATE_FOLDER）） {
//取得要建立的文件夹的名字
String strFileName = request.getParameter（"NewFolderName"）;
//进行编码转换
strFileName = new String（strFileName.getBytes（"iso8859-1"）,"UTF-8"）;
String newFolderStr = UtilsFile.sanitizeFolderName（strFileName）;
logger.debug（"Parameter NewFolderName: {}", newFolderStr）;
//……
3.引用中文名的图片不能正常显示
（1）.修改tomcat连接器的配置URIEncoding（建议不要使用，这个方法对Get方法进行的提交会对中文进行解码，有可能会产生乱码）。
原因是：图片引用的地址进行URL编码，当使用这个路径访问服务器时，先进行解码，这样就会解释成乱码，所以找不到对应的资源。
<Connector port="8080" protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443" URIEncoding="UTF-8"/>（2）.避免出现引用中文名字图片的情况，在ConnectorServlet类的doPost方法中加上粗体部分代码。
//……
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）;
//使用UUID来替换文件名
filename = UUID.randomUUID（）.toString（） + "." + extension;
//如果文件扩展名不允许上传
if （!ExtensionsHandler.isAllowed（resourceType, extension））
//……
4. 控制上传文件的大小和自定义错误码
1.在上传文件的页面（浏览器）加载文件点击“Upload”按钮，将表单提交到ConnectorServlet（服务器），ConnectorServlet处理上传的文件（不同的处理结果对应不同的响应消息），ConnectorServlet通过处理的结果调用不同的回调函数，并传递错误码，对错误码进行处理。
打印错误码对应的提示信息步骤：
1.在服务器端的Servlet中，在保存文件之前先判断文件的大小，如果超出限制，就传递一个自定义的错误码，并且不再保存文件。在ConnectorServlet类的doPost方法中加上粗体部分代码。
//……
//如果文件扩展名不允许上传
if （!ExtensionsHandler.isAllowed（resourceType, extension））
ur = new UploadResponse（UploadResponse.SC_INVALID_EXTENSION）;
//如果文件大小超出限制
else if（uplFile.getSize（） > 100 * 1024）{
//传递一个自定义的错误码
ur = new UploadResponse（204）;
}
//如果不存在以上情况，则保存文件
else {
//……
2.修改对应的页面中的回调函数，增加对这个自定义的错误码的处理。在WebContenteditordialogfck_image文件夹下Fck_image.js文件中加上粗体部分代码。
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 ;
//将ConnectorServlet文件中自定义的204错误码在此处进行定义。
case 204 :
alert（ "文件大小超出限制" ） ;
return ;
case 500 :
alert（ 'The connector is disabled' ） ;
break ;
default :
alert（ 'Error on file upload. Error number: ' + errorNumber ） ;
return ;
}
[color=red][b]按照上边的步骤你就能看到你想要的结果了。[/b][/color]
扫一扫
163
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
