文本编辑工具fck使用介绍
Fckedit简介
废话不多说直接写用法了：
http://ckeditor.com/
下载配置文件：
这里我们要下两个：第一个：FCKeditor_2.6.6.zar 、第二个：fckeditor-java-2.6-bin.zip（在java平台开发）第三个：fckeditor-java-2.6-src.zip（源码）
调用方式：（js and jsp）
一.通过javascript调用
第一种方法：
0>将FCKeditor_2.6.6.zar解压后的fckeditor文件拷贝到WebRoot根目录下
1>、链接script
<script src="fckeditor/fckeditor.js" type="text/javascript"></script>
2>、在body标签里面加上
<body>
This is my HTML page.<br>
<script type="text/javascript">
var oFCKeditor = new FCKeditor('FCKeditor1');//‘FCKeditor1’输入框的name
/*默认/fckeditor/：http://localhost:8080/fckeditor*/
//http://localhost:8080/fckedit/fckeditor
oFCKeditor.BasePath = "/fckedit/fckeditor/";
oFCKeditor.Create();
</script>
</body>
第二种方法：
0>将FCKeditor_2.6.6.zar解压后的fckeditor文件拷贝到WebRoot根目录下
1>、链接script
<script src="fckeditor/fckeditor.js" type="text/javascript"></script>
2>、在head标签里面加上
<script type="text/javascript">
window.onload = function()
{
var oFCKeditor = new FCKeditor( 'MyTextarea' ) ;
oFCKeditor.BasePath = "/fckedit/fckeditor/" ;
oFCKeditor.ReplaceTextarea() ;
}
</script>
3>、在body标签里面加上：
<textarea cols="60" rows="4" id="MyTextarea" name="MyTextarea">Hello</textarea>
注意：
1.BasePath要正确的设置
2.BasePath一定要以“/”结尾
FCKEdit对象的属性：
名称 描述 默认值
width 宽度 100%
hetght 高度 200
value 编辑器初始化内容 空字符串
ToolbarSet 工具条集合的名称（内置有Default和Basic也可以直接定制） Default
BasePath 编辑器的基路径 /feckeditor/
构造器：
var FCKeditor = function（instanceName,width,height,toolbarSet,value）
.其中instanceName为编辑器输出的textarea元素的name属性值,必须指定
.参数会复制给同名属性
二.在jsp中通过自定义标签调用
0>将fckeditor-java-2.6-bin.zar 解压后的fckeditor-java-core-2.6.jar和lib目录下的jar文件拷贝到WebRoot/lib目录下一共7个：
commons-fileupload-1.2.1.jar
commons-io-1.3.2.jar
fckeditor-java-core-2.6.jar
imageinfo-1.9.jar
java-core-2.6.jar
slf4j-api-1.5.8.jar
slf4j-simple-1.5.8.jar
2>导入标签：
<%@ taglib uri="http://java.fckeditor.net" prefix="FCK" %>
3>在body标签里面加上：
<FCK:editor instanceName="myEditor" basePath="/fckeditor" value="helloworld"></FCK:editor>
注意：
1.basePath 以‘/’开发,并且代表当前工程的路径
2.一定要设置value的属性值，并且值不能是空字符串即可以用 但不可以用“”。
配置FCKEditor
主配置文件fckconfig.js但我们一般不直接在里面修改配置属性。
这里先介绍自定义一个配置文件myconfig.js
1.我们新建一个js文件：myconfig.js
2.修改fckconfig.js里面的FCKConfig.CustomConfigurationsPath = '' ;
改成：FCKConfig.CustomConfigurationsPath = '/fckedit/myconfig.js' ;
3.在页面的调用代码中对FCKeditor的实例进行配置
oFCKeditor.Config["CustomConfigurationPath"] = "/myconfig.js"
配置加载顺序：
1.加载主配置文件fckconfig.js
2.加载自定义的配置文件（如果有）覆盖相同的配置项
3.使用对实例的配置覆盖相同的配置项（只对当前的实例有效）
一般需要的修改的配置:
1.自定义ToolbarSet，去掉一些功能
2.加上几种常用的字体
3.修改“回车”和“Shift+回车”的换行行为
4.修改编辑区的样式文件
5.更换表情图片
下面一一介绍这5种修改配置：
1.自定义ToolbarSet，去掉一些功能
1>、新建一个myconfig.js配置文件将/fckedit/WebRoot/fckeditor/fckconfig.js文件里的ToolbarSets配置项copy到里面：
FCKConfig.ToolbarSets["zchen"] = [
['Source','DocProps'],
['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],
'/',
['Style','FontFormat','FontName','FontSize'],
['TextColor','BGColor'],
['FitWindow','ShowBlocks','-','About'] // No comma for the last row.
] ;
去掉一些你不需要的功能：‘-’分行、‘/’分段
2>、在/fckedit/WebRoot/fckeditor/fckconfig.js下修改：
FCKConfig.CustomConfigurationsPath = '/fckedit/myconfig.js' ;引入自定义的配置文件
3>、在页面中引入修改了的配置文件：
<head>
<script src="fckeditor/fckeditor.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function()
{
var oFCKeditor = new FCKeditor( 'MyTextarea' ) ;
oFCKeditor.BasePath = "/fckedit/fckeditor/" ;
oFCKeditor.ToolbarSet = "zchen" ;
oFCKeditor.ReplaceTextarea() ;
}
</script>
</head>
2.加上几种常用的字体
第一种、在 fckconfig.js文件配置：
默认情况下,FCKEditor在进行文本编辑时,无法使用中文字体。
打开 fckconfig.js 文件
找到第154行(应该是),会发现:
程序代码：
FCKConfig.FontNames = 'Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;
将其修改为
FCKConfig.FontNames = '宋体;黑体;幼圆;楷体_GB2312;仿宋_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;
这样还是不行，虽然发现编辑器的字体选项多了已添加的中文字体，但应用到文本上却发现没有任何作用！
接着下一步 ：
打开editor/css/fck_editorarea.css 文件
将程序代码:
font-family: Arial, Verdana, sans-serif;
修改为：
font-family: 宋体, 黑体, 幼圆, 楷体, 仿宋, Arial, Verdana, sans-serif;
注意：一定要“另保存”为 UTF-8编码格式的文档，否则会出现乱码！
第二种、在自定义文件中配置
我们可以在我们自定义myconfig.js文件中修改：
FCKConfig.FontNames = '宋体;楷体;_GB2312;黑体;隶书;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;
3.修改“回车”和“Shift+回车”的换行行为
在fckconfig.js文件下将这两个配置属性的值对换一下修改后的结果是：
FCKConfig.EnterMode = 'br' ; // p | div | br
FCKConfig.ShiftEnterMode = 'p' ; // p | div | br
4.修改编辑区的样式文件：
FCKConfig.EditorAreaCSS = FCKConfig.BasePath + 'css/fck_editorarea.css' ;
修改fck_editorarea.css里面的样式即可。
5.更换表情图片
修改在fckconfig.js文件下的
FCKConfig.SmileyPath = FCKConfig.BasePath + 'images/smiley/msn/' ;
FCKConfig.SmileyImages = ['regular_smile.gif','sad_smile.gif','wink_smile.gif','teeth_smile.gif','confused_smile.gif','tounge_smile.gif','embaressed_smile.gif','omg_smile.gif','whatchutalkingabout_smile.gif','angry_smile.gif','angel_smile.gif','shades_smile.gif','devil_smile.gif','cry_smile.gif','lightbulb.gif','thumbs_down.gif','thumbs_up.gif','heart.gif','broken_heart.gif','kiss.gif','envelope.gif'] ;
FCKConfig.SmileyColumns = 8 ;
FCKConfig.SmileyWindowWidth = 320 ;
FCKConfig.SmileyWindowHeight = 210 ;
复制到我们自定义的myconfig.js文件里：
FCKConfig.SmileyPath = FCKConfig.BasePath + 'images/smiley/msn/' ;
FCKConfig.SmileyImages = ['logp.jpg','regular_smile.gif','sad_smile.gif','wink_smile.gif','teeth_smile.gif','confused_smile.gif','tounge_smile.gif','embaressed_smile.gif','omg_smile.gif','whatchutalkingabout_smile.gif','angry_smile.gif','angel_smile.gif','shades_smile.gif','devil_smile.gif','cry_smile.gif','lightbulb.gif','thumbs_down.gif','thumbs_up.gif','heart.gif','broken_heart.gif','kiss.gif','envelope.gif'] ;
FCKConfig.SmileyColumns = 8 ;
FCKConfig.SmileyWindowWidth = 320 ;
FCKConfig.SmileyWindowHeight = 210 ;
1>将我们要加入的图片放到： 'images/smiley/msn/' 目录里。
2>将图片的名字引入FCKConfig.SmileyImages里面：
3>修改窗口的大小：
FCKConfig.SmileyWindowWidth =640 ;
FCKConfig.SmileyWindowHeight = 480 ;
4>修改每行显示多少个：FCKConfig.SmileyColumns = 10 ;
然后在：/fckedit/WebRoot/fckeditor/editor/dialog/fck_smiley.html文件下修改：
window.onload = function ()
{
// First of all, translate the dialog box texts
oEditor.FCKLanguageManager.TranslatePage(document) ;
//dialog.SetAutoSize( true ) ;
}
5>让窗口出现滚动条：
在/fckedit/WebRoot/fckeditor/editor/dialog/fck_smiley.html文件下修改：
<body style="overflow: auto">
6>、将自定义的配置文件也放到fckeditor/editor目录下面则需要在/fckedit/WebRoot/fckeditor/fckconfig.js文件修改下：
FCKConfig.CustomConfigurationsPath = FCKConfig.EditorPath+'myconfig.js' ;
实现文件上传功能：
1>、Declare the ConnectorServlet in your web.xml:
<web-app version="2.4">
...
<servlet>
<servlet-name>ConnectorServlet</servlet-name>
<servlet-class>
net.fckeditor.connector.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>
...
</web-app>
2>.Create a fckeditor.properties file in your classpath and add(在src目录下创建一个fckeditor.propertity文件将):
connector.userActionImpl=net.fckeditor.requestcycle.impl.EnabledUserAction
下面简述使用上传时遇到的问题：
1.上传文件名为中文时名字会出现乱码：
在版本2.4中：
1>、检查客户端页面编码是否正确：打开在/fckedit/WebRoot/fckeditor/editor/filemanager/browser/default/frmupload.html文件查看编码是不是utf-8(这里确认是正确的)
2>、检查服务器端的servlet上传代码：net.fckeditor.connector.ConnectorServlet.class
先关联上源码，源码在fckeditor-java-2.6-src.zar包里。
3>、新建一个setvlet这里名字也取为ConnectorServlet然后将关联后的ConnectorServlet.class的代码复制到我们建的Servlet里面。
4>、在246行加上upload.setHeaderEncoding("utf-8")
5>、修改web.xml的映射路径
在版本fckeditor-java-2.6-bin.zip中：则不会出现这种情况只需要：1、在web.xml文件中映射servlet 2、创建fckeditor.propertity文件
2.创建中文名的目录时会出现乱码：
同理先检查客服端再检查服务器端和上面情况一样在2.6版本中不会出现乱码情况。
在2.4可以将：ConnectorServlet.java代码在156行加上：
String fileName = request.getParameter("NewFolderName");
fileName = new String(fileName.getBytes("iso8859-1"),"UTF-8");
3.引用的中文名字的图片不能正常显示：
1>、修改tomcat配置在conf/server.xml :<Connector .... URIEncoding="UTF-8"/>:不推荐使用
2>、在ConnectorServlet代码的176行加上：filename = UUID.randomUUID().toString()+"."+extension;上传后的图片将不再以原来的名字保存而是会换成uuid编码形式
4.控制允许上传的文件的类型：
FCKeditor把上传的文件分成4类：File、Image、Flash、Media
文件分类 客户端验证配置(fckconfig.js) 服务器端验证配置(fckeditor.properties)
File FCKConfig.LinkUploadAllowedExtensions connector.resourceType.file.extensions.allowed
Image FCKConfig.ImageUploadAllowedExtensions connector.resourceType.image.extensions.allowed
Flash FCKConfig.FlashUploadAllowedExtensions connector.resourceType.flash.extensions.allowed
Media 无对应配置 connector.resourceType.media.extensions.allowed
假如我们要上传以.zc结尾的文件则：
1>、在net.fckeditor.handlers下把default.properties里的connector.resourceType.image.extensions.allowed = bmp|gif|jpeg|jpg|png这一项
放到我们自定义的/fckedit/src/fckeditor.properties里面并加上后缀。
2>、在/fckedit/WebRoot/fckeditor/fckconfig.js文件下把 FCKConfig.ImageUploadAllowedExtensions = ".(jpg|gif|jpeg|png|bmp)$" ; // empty for all
拷贝到我们自定义的myconfig.js文件里面并加上我们要加上的后缀：FCKConfig.ImageUploadAllowedExtensions = ".(jpg|gif|jpeg|png|bmp|abc)$" ; // empty for all
控制允许上传的文件的大小：
1>.在服务器端的servlet中，在保存文件之前先判断一下文件大小，如果超出限制就传递一个自定义的错误吗并且不再保存文件
2>、修改对应的页面中的回调函数，增加对这个自定义的错误码的处理
例如：不允许上传大于10k的文件(默认是没限制的)
先增加错误码在/fckedit/WebRoot/fckeditor/editor/dialog/fck_image/fck_image.js文件474行添加这个：
case 204 :
alert( "文件大小超出限制" ) ;
return ;
然后修改ConnectorServlet：
filename = UUID.randomUUID().toString()+"."+extension;
//如果这个文件的扩展名不允许上传
if (!ExtensionsHandler.isAllowed(resourceType, extension)) {
obj[0] = UploadResponse.SC_INVALID_EXTENSION;
obj[1] = null;
obj[2] = null;
obj[3] = null;
ur = new UploadResponse(obj);
}//如果文件大小超出限制
else if(uplFile.getSize()>10*1024*1024){
obj[0] = 204;
obj[1] = null;
obj[2] = null;
obj[3] = null;
//传递一个自定义的错误码
ur = new UploadResponse(obj);
}