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.修改对应的页面中的回调函数，增加对这个自定义的错误码的处理。在WebContenteditordialogfck_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 ;
}

按照上边的步骤你就能看到你想要的结果了。

FCKeditor富编辑实现

猜你喜欢