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 ; }
按照上边的步骤你就能看到你想要的结果了。