一 FCK的使用方式常见有三种:
第一: 引用fckeditor.js然后创建
<script type="text/javascript">
//var FCKeditor = function(instanceName,width,height,toolbarSet,value);
//创建FCKeditor实例,名称为FCKeditor1
var oFCKeditor = new FCKeditor('FCKeditor1');
oFCKeditor.BasePath = "/fckeditor/fckeditor/"; //前面为工程名称,设置编辑器的基准路径
oFCKeditor.Width="50%"; //设置宽度
oFCKeditor.Height="400"; //设置高度
oFCKeditor.ToolbarSet = "Basic"; //工具集
oFCKeditor.Value=""; //初始值
oFCKeditor.Create(); //创建一个编辑器
</script>
第二: 替换textarea方式
<script type="text/javascript">
window.onload = function(){
var oFCKeditor = new FCKeditor('MyTextarea');
oFCKeditor.BasePath = "/fckeditor/fckeditor/";
//设置启用新的自定义配置文件,也可以在fckconfig.js文件中进行
//这样的配置FCKConfig.CustomConfigurationsPath = FCKConfig.EditorPath + 'myconfig.js' ;
oFCKeditor.Config["CustomConfigurationsPath"]="/fckeditor/fckeditor/myconfig.js";
oFCKeditor.ToolbarSet="myToolbar";
oFCKeditor.Width="80%";
oFCKeditor.Height="400";
oFCKeditor.ReplaceTextarea();
}
</script>
<textarea id="MyTextarea" name="MyTextarea">this is <b>the</b> initial value.</textarea>
第三: 自定义标签
<%@ taglib uri="http://java.fckeditor.net" prefix="FCK" %>
<!--
1. basePath以'/'开头,并且这个'/'代表当前工程的路径
2. 一定要设置value属性的值,并且值不能是空字符串
3. 修改设置主配置文件fckconfig.js,方式有二:直接修改原配置文件;建一个新的配置文件覆盖原来的配置文件
4. 新建一个配置文件myconfig.js,在里边进行相关属性配置
5. 要使用新配置文件的方式有二:
5.1 在主配置文件中引入FCKConfig.CustomConfigurationsPath = '/fckeditor/myconfig.js' ;
5.2 在创建实例时引用 oFCKeditor.Config["CustomConfigurationsPath"]="/fckeditor/myconfig.js";
前一种是影响所有应用,后一种是针对某一个应用
-->
<FCK:editor instanceName="myEditor" basePath="/fckeditor" value=" "></FCK:editor>
二 FCKeditor的配置文件fckconfig.js
1. basePath以'/'开头,并且这个'/'代表当前工程的路径
2. 一定要设置value属性的值,并且值不能是空字符串
3. 修改设置主配置文件fckconfig.js,方式有二:直接修改原配置文件;建一个新的配置文件覆盖原来的配置文件
4. 新建一个配置文件myconfig.js,在里边进行相关属性配置
5. 要使用新配置文件的方式有二:
5.1 在主配置文件中引入FCKConfig.CustomConfigurationsPath = '/fckeditor/myconfig.js' ;
5.2 在创建实例时引用 oFCKeditor.Config["CustomConfigurationsPath"]="/fckeditor/myconfig.js";
前一种是影响所有应用,后一种是针对某一个应用
FCK的常用配置:
1.0 ToolbarSet工具集
实施:修改fckconfig.js里的FCKConfig.ToolbarSets配置方式采用新配置文件的第二种形式来完成;
将FCKConfig.ToolbarSets所有配置参数拷贝到myconfig.js中将不用的参数数据删除,结果参见
fcktwo.jsp
1.1 修改字体种类
1.2 修改'回车'和'Shift+回车'的行为(默认'回车是段落,shift+回车是换行')
1.3 修改编辑区样式文件
1.4 增加表情图片
以上所有实现详见:myconfig.js文件,该文件路径:fckeditor/目录下,此文件编码格式为UTF-8
三 FCK文件上传:
(一)设置文件上传步骤有二:
a.首先在web.xml文件中配置一个servlet,再将映射到指定的路径上
<servlet>
<servlet-name>Connector</servlet-name>
<servlet-class>
net.fckeditor.connector.ConnectorServlet
</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Connector</servlet-name>
<url-pattern>/fckeditor/editor/filemanager/connectors/*</url-pattern>
</servlet-mapping>
b.其次新建一个配置文件fckeditor.properties并且把它放到classpath路径下
配置文件内容:connector.userActionImpl=net.fckeditor.requestcycle.impl.UserActionImpl
(二)处理上传中文文件名称乱码:
原因:文件上传保存时,文件名就保存的乱码;但有两个环节可能造成,1: 上传页面设置的编码不支持中文;2 服务器端处理的程序造成的
结果是由第二种原因造成:解决办法 将源代码打开拷贝出来新建一个同名的类,再把源码copy进去,紧接将web.xml的servlet
映射配置修改指向这个新建的servlet
<servlet>
<servlet-name>Connector</servlet-name>
<servlet-class>
com.java.web.ConnectorServlet
</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
(三)创建中文目录名时会出现乱码:
解决思路:先检查提交的内容是否被正确编码,再检查服务器端是否正确的解码
问题是在:ConnectorServlet中,在得到新的文件夹名称时没有对中文进行处理
String folderName = request.getParameter("NewFolderName");
folderName = new String(folderName.getBytes("iso8859-1"),"UTF-8");
String newFolderStr = UtilsFile.sanitizeFolderName(folderName);
(四)处理引用中文图片名时不能正常显示:
方法一: 修改Tomcat的server.xml中的连接器的配置,添加 URIEncoding="UTF-8" 这样问题就解决了;
原因是: 中文的图片名称在引用时进行了URL编码,在访问服务器上的资源时,连接器首先会对访问的路径时行
解码,而Tomcat默认是以iso8859-1进行解码;而这里就会解释为乱码,这时当然就找不到对应的资源了.
但是这种方法不推荐使用,因为它会造成其它的中文乱码问题出现.
方法二: 在ConnectorServlet中,在保存文件时将保存的文件名替换成UUID
filename = UUID.randomUUID().toString() + "." +extension;
(五)控制上传文件类型
File image flash Media(多媒体文件)
1: 对FCKeditor的配置扩展名
2: 对Connector的配置扩展名列表,控制允许上传文件的类型有两种设置方式:a 设置允许上传文件的扩展名列表.
b 禁止上传文件的扩展名列表.两种方式不能同时使用;默认设置是a
对于这些的配置文件在fckeditor-java-core核心包中的net.fckeditor.handlers包下default.properties文件中
这是服务器端的验证配置,同时还有客户端验证配置,在fckconfig.js中;配置其中之一就可以了
(六)控制上传文件大小
上传文件的机制:表单 ->提交到服务器端(ConnectorServlet)进行处理 ->对不同的处理对应不同的响应信息
->回调函数->打印错误码对应的提示信息
1: 在服务器端的servlet中,在保存文件之前先判断一下文件的大小,如果超出限制,就传递一个自定义的错误码,
并且不再保存文件
2: 修改对应的页面中的回调函数,增加这个自定义的错误码的处理
在文件264行处添加
//如果文件大小超出限制,就传递一个自定义的错误码
else if(uplFile.getSize() > 10 * 1024){
ur = new UploadResponse(204);
}
查找当前页面的方式(因为一个功能页面可以是由多个页面组合而成),在功能处点击右键然后看属性中就有文件的绝对路径
然后在对应的页面(dialog/fck_image/fck_image.js|frmupload.html)中找到请求响应的回调函数进行添加对错误码204的处理.然后就可以了
四 获取FCKeditor编辑内容
request.getParameter("MyTextarea"); //这个名称是创建实例时的名称
如果是自定义标签时,就直接取ID就可以得到喽
五 实际应用
在图片,flash,超连接等功能中都有此项:
在实际应用中,不能让用户使用浏览服务器的功能,因此就在去掉在上传图片的窗口上的相应按钮
在editor/dialog/fck_image.html文件中修改