FCKeditor富编者实现 _Web前端

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> ??
??
<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> ??
??
<script?type= "text/javascript" ?src= "fckeditor/fckeditor.js" ></script> ??
??
<script?type= "text/javascript" > ??
window.onload?=?function（）{ ??
var?oFCKeditor?=? new ?FCKeditor（? 'MyTextarea' ?）?; ??
oFCKeditor.BasePath?=? "/FCKProject2.6.5/fckeditor/" ?; ??
oFCKeditor.ReplaceTextarea（）?; ??
} ??
</script> ??
</head> ??
<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：

Java代码?

<%@?page?language= "java" ?contentType= "text/html;?charset=UTF-8" ??
????pageEncoding= "UTF-8" %> ??
??
<%@?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> ??
??
<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 ?; ??
}?