FCKeditor富编辑实现富编辑模块可以实现在线文档编辑功能，并动态上传插入image/falsh到文档中。本项目中，我
FCKeditor富编辑实现
富编辑模块可以实现在线文档编辑功能，并动态上传插入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调用
内联方法（首选）：在网页内设置编辑器
Java代码?
<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”方法：
Java代码?
<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属性：
属性名描述默认值Windth宽度100%Height高度200Value编辑器初始化内容（空字符串）ToolbarSet工具条集合的名称（Default）[内置有default和basic，也可以自定义]BasePath编辑器的基本路径/fckeditor/
FCK构造方法：
Var FCKeditor = function（instanceName,width,height,toolbarSet,value）;
instanceName为编辑器输出的textarea元素的name属性的值，必须指定参数会赋值给同名属性
2.JSP中自定义标签调用
在JSP中通过自定义标签调用FCKeditor：
Java代码?
<%@?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
Java代码?
FCKConfig.CustomConfigurationsPath?=?'/myconfig.js'?;??
（2）.建立一个独立的配置文件，只需要写修改的配置项 myconfig.js
（3）.在调用FCKeditor的时候使用：
Java代码?
var?oFCKeditor?=?new?FCKeditor（?"FCKeditor1"?）?; ??????oFCKeditor.Config["CustomConfigurationsPath"]?=?"/myconfig.js"??; ??????oFCKeditor.Create（）?;??
配置加载顺序
1.加载主配置文件fckeditor.js
2.加载自定义的配置文件（如果有），覆盖相同的配置项
3.使用对实例的配置覆盖相同的配置项（只对当前实例有效）
提示：
1.系统会自动检测并运行适当的界面语言（默认，可以修改）
2.不能删除主配置文件fckconfig.js
3.修改配置后腰清空浏览器缓存，以免影响结果（或访问时强制刷新也可以）
添加一个数字或时间在自定义配置路径的结尾代码，强迫浏览器每次加载它：
Java代码?
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）不是同一个，其值也不一样
Java代码?
//设置语言，是否自动检测，默认为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中的配置
Java代码?
<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方法中加上粗体部分代码。
Java代码?
//…… ??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方法中加上粗体部分代码。
Java代码?
//…… ??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编码，当使用这个路径访问服务器时，先进行解码，这样就会解释成乱码，所以找不到对应的资源。
Java代码?
<Connector?port="8080"?protocol="HTTP/1.1"?connectionTimeout="20000"????redirectPort="8443"?URIEncoding="UTF-8"/>??
（2）.避免出现引用中文名字图片的情况，在ConnectorServlet类的doPost方法中加上粗体部分代码。
Java代码?
//…… ??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方法中加上粗体部分代码。
Java代码?
//…… ??//如果文件扩展名不允许上传 ??if?（!ExtensionsHandler.isAllowed（resourceType,?extension）） ??ur?=?new?UploadResponse（UploadResponse.SC_INVALID_EXTENSION）; ??//如果文件大小超出限制 ??else?if（uplFile.getSize（）?>?100?*?1024）{ ??//传递一个自定义的错误码 ??ur?=?new?UploadResponse（204）; ??} ??//如果不存在以上情况，则保存文件 ??else?{ ??//……??
2.修改对应的页面中的回调函数，增加对这个自定义的错误码的处理。在WebContent?editor?dialog?fck_image文件夹下Fck_image.js文件中加上粗体部分代码。
Java代码?
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?; ??}?
