FCKeditor使用技巧

一　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文件中修改