最近在另一个项目接到个任务将原来的editor更改为FCKEditor,主要是Editor不能够上传swf文件,这个组件当时合成的同事离职了,这个组件百度的资料非常少,后来发现这个应该是新浪的组件,貌似不支持上传swf文件,后来将模块中的文本编辑器更改为FckEditor。

   

部署:

   FckEditor使用的是2.6.10版本【FckEditor目前已经为ckEditor】,需要2个文件,分别为FCKeditor_2.6.10.zip与fckeditor-java-demo-2.6.war,zip包主要是fck所需要的前台文件,war是fkc的jar包,zip包解压后放到webroot下,war放在tomcat的webapps下,启动tomcat,自动将解压war包,将war包中的jar包文件拷贝到项目中的lib下即可。

   在src下创建fckeditor.properties,写入以下代码:

connector.userActionImpl=net.fckeditor.requestcycle.impl.UserActionImpl

   在web.xml中加入以下代码

<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>
    /js/fckeditor/editor/filemanager/connectors/*
   </url-pattern>
</servlet-mapping>

注:xml里面的代码被我手动修改了下,我把fck的前台文件放在了webroot/js下,所以fck的路径是需要加上js的,所以如果以后fck是放在webroot根目录的情况下,则connector的url为/fckeditor/editor/filemanager/connectors/*【去掉了js】


使用:

   1、展示文本编辑器

        <script type="text/javascript" src="<%=basePath %>/js/fckeditor/fckeditor.js"></script>

<script> 
        $(document).ready(function() {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            
            var oFCKeditor = new FCKeditor('MyTextarea') ;
                    oFCKeditor.BasePath = "<%=basePath %>/js/fckeditor/";
                    oFCKeditor.ToolbarSet="DsGg";
                    oFCKeditor.Height = 400;
                    oFCKeditor.ReplaceTextarea();
        });
    </script>
<textarea rows="4" cols="60" name="MyTextarea"></textarea>
<input type="text" name="bgNotice.xxnr" id="content" rows="1" cols="1" class="text-input" style="display:none" />

   页面中的代码分为2部分,第一段代码块是创建文本编辑器,MyTextarea必须与第二段代码中textarea的name一致;DSGg是在fckconfig.js文件中定义的文本编辑器显示的菜单项。第二段代码块中的input框是用来存放文本编辑器中写入的值进行表单提交。


   2、获取文本编辑器中的写入值代码如下:

var Editor = FCKeditorAPI.GetInstance('MyTextarea');
alert(Editor.GetXHTML(true));

参数true表示获取的是文本编辑器的源码【即html代码】。


   3、文本编辑器中写入值

   只需要修改textarea定义的部分    

<textarea rows="4" cols="60" name="MyTextarea">文本编辑器的初始值</textarea>



遇到的其他注意事项:

   1、fck瘦身

       1)去掉fck前台文件中所有以‘_’开头的文件或者文件夹  

       2)fck文件夹下只保留editor文件夹、fckconfig.js、fckeditor.js、fckpackager.xml、fckstyles.xml、fcktemplates.xml

       3)删除fckeditor\editor\filemanager\connectors文件夹

       4)进入fckeditor\editor\lang,只保留en.js、zh-cn.js2个文件,其他都删除

    注:这里删除的4部分内容都是我的项目所不需要的,其他使用环境时需要注意是否这么删除。


   2、在测试过程中发现删除图片、swf的时候,在图片成功、图片名称重复时,提示的信息皆为英语,此处在fckeditor/editor/filemanager/browser/default/frmupload.html这个文件中进行查找修改


   3、上传的图片、swf文件默认长传的路径为项目的webroot下uerfiles中。


   4、测试中发现上传的文件名如果包括中文时,选择文件后,文件名称进行了转码,转码之后文件不能显示在文本编辑器中【文件能够正常上传】查了一些资料,发现需要使用另一个jar包——FCKeditor2.4ByTxdnet.Cn.jar代替之前war包中的java-core-2.6.jar。更新后,发现上传的文件名都为上传的时间戳,同时也解决了文件名重复的问题。