跨平台在线编辑器FCKeditor

    最近在做一个网站需要用到在线编辑器,之前没有接触过在线编辑器,对它很陌生.于是在网上找了一些FCKeditor相关的资料.收集整理如下.

运行效果:


实现步骤:
1)  到 FCKeditor 网站http://www.fckeditor.net/下载
FCKeditor2.2(FCKeditor主文件)
FCKeditor2.3(jsp,FCKeditor整合包)两个.zip 文件.

2) 解压FCKeditor2.2,把整个目录copy到工程的根目录下.

3) 解压FCKeditor2.3,把解压包中\web\WEB-INF\目录下的web.xml文件合并到项目的\WEB-INF\目录下的web.xml文件中.把其中的src目录下的FCKeditor.tld文件copy到WEB-INF下.

4) 将FCKeditor-2.3.zip压缩包中\web\WEB-INF\目录下的web.xml文件合并到项目的\WEB-INF\目录下的web.xml文件中。

5) 修改合并后的web.xml文件，将名为SimpleUploader的Servlet的enabled参数值改为true，以允许上传功能Connector Servlet的baseDir参数值用于设置上传文件存放的位置.

6) 在web.xml中添加
<taglib>
   <taglib-uri>/TestModule</taglib-uri>
   <taglib-location>/WEB-INF/FCKeditor.tld</taglib-location>
</taglib>

7) 修改影射路径,把web.xml中的servlet-mapping
editor/filemanager/browser/default/connectors/jsp/connector
修改成 /FCKeditor/editor/filemanager/browser/default/connectors/jsp/connector

/editor/filemanager/upload/simpleuploader
修改成 /FCKeditor/editor/filemanager/upload/simpleuploader

8) 打开/FCKeditor/fckconfig.js
修改 FCKConfig.DefaultLanguage = 'zh-cn' ;
把FCKConfig.LinkBrowserURL等的值替换成以下内容：
FCKConfig.LinkBrowserURL
= FCKConfig.BasePath + "filemanager/browser/default/browser.html?Connector=connectors/jsp/connector" ;

FCKConfig.ImageBrowserURL
= FCKConfig.BasePath + "filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector" ;

FCKConfig.FlashBrowserURL
= FCKConfig.BasePath + "filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector" ;

FCKConfig.LinkUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=File' ;
FCKConfig.FlashUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=Flash' ;
FCKConfig.ImageUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=Image' ;

9) fckconfig.js总配置文件，可用记事本打开，修改后将文件存为utf-8 编码格式。找到：
FCKConfig.TabSpaces = 0 ; 改为FCKConfig.TabSpaces = 1 ; 即在编辑器域内可以使用Tab键。
如果编辑器用在网站前台的话，那就需要考虑安全完全问题.
在前台千万不要使用Default的toolbar，要么自定义一下功能，要么就用系统已经定义好的Basic，
也就是基本的toolbar，
找到:FCKConfig.ToolbarSets["Basic"] = [['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink','-','About']] ;
修改:FCKConfig.ToolbarSets["Basic"] = [['Bold','Italic','-','OrderedList','UnorderedList','-',/*'Link',*/'Unlink','','Style','FontSize','TextColor','BGColor','-','Smiley','SpecialChar','Replace','Preview'] ] ;
把图像功能去掉，把添加链接功能去掉，因为图像和链接和flash和图像按钮添加功能都能让前台页直接访问和上传文件,FCKeditor还支持编辑域内的鼠标右键功能。
FCKConfig.ContextMenu =[['Generic',/*'Link',*/'Anchor',/*'Image',*/'Flash','Select','Textarea','Checkbox','Radio','TextField','HiddenField',
/*'ImageButton',*/'Button','BulletedList','NumberedList','TableCell','Table','Form']] ;
这也是改过的把鼠标右键的“链接、图像，FLASH，图像按钮”功能都去掉。
找到:FCKConfig.FontNames  = 'Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;
加上几种我们常用的字体.
FCKConfig.FontNames= '宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;

10) 在 web.xml 文件默认AllowedExtensionsFile,DeniedExtensionsImage,DeniedExtensionsFlash三个参数没值,需要加上相应的扩展名.

启动服务器测试.......成功后，来给FCKeditor瘦瘦身.
1、将FCKeditor目录下及子目录下所有以”_”下划线开头的文件夹删除
2.    FCKeditor根目录下只保留fckconfig.js, fckeditor.js, fckstyles.xml, fcktemplates.xml其余全部删除
3.   将editor/filemanager/upload目录下文件及文件夹清空.
4.   还可以将editor/skins目录下的皮肤文件删除，只留下default一套皮肤（如果你不需要换皮肤的话）
5.   还可以将editor/lang目录下文件删除，只保留en.js, fcklanguagemanager.js, zh-cn.js, zh.js文件（英文，简体中文，繁体中文一般应该够用了:)

FCKeditor有3中使用方法:
1.FCKeditor自定义标签
必须加头文件
<%@ taglib uri="/TestFCKeditor" prefix="FCK" %>
<form action="show.jsp" method="post" target="_blank">
<FCK:editor id="content" basePath="/TestFCKeditor/FCKeditor/"width="700" height="500"skinPath="/TestFCKeditor/FCKeditor/editor/skins/silver/"
toolbarSet = "Default">
input
</FCK:editor>
<input type="submit" value="Submit">
</form>

2.script脚本语言调用
必须引用 脚本文件 <script type="text/javascript"src="/TestFCKeditor/FCKeditor/fckeditor.js"></script>

3.FCKeditor API 调用
必须加头文件 <%@ page language="java" import="com.fredck.FCKeditor.*" %>
<%
FCKeditor oFCKeditor ;
oFCKeditor = new FCKeditor( request, "content" ) ;
oFCKeditor.setBasePath( "/TestFCKeditor/FCKeditor/" ) ;
oFCKeditor.setValue( "input" );
out.println( oFCKeditor.create() ) ;
%>

ok--- 祝您顺利.