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调用
内联方法（首选）：在网页内设置编辑器
- <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属性：
| 属性名 | 描述 | 默认值 |
| Windth | 宽度 | 100% |
| Height | 高度 | 200 |
| Value | 编辑器初始化内容 | （空字符串） |
| ToolbarSet | 工具条集合的名称 | （Default）[内置有default和basic，也可以自定义] |
| BasePath | 编辑器的基本路径 | /fckeditor/ |
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 ;
- }