FCKeditor在线编辑器的使用

【 tulaoshi.com - 编程语言 】

试用了一下FCKeditor,根据网上的文章小结一下：
　　1.下载
　　FCKeditor.Java 2.3 (FCKeditot for java)
　　FCKeditor 2.2 (FCKeditor基本文件)

　　2.建立项目:tomcat/webapps/TestFCKeditor.

　　3.将FCKeditor2.2解压缩,将整个目录FCKeditor复制到项目的根目录下，
　　目录结构为：tomcat/webapps/TestFCKeditor/FCKeditor
　　然后将FCKeditor-2.3.zip（java）压缩包中webWEB-INFlib目录下的两个jar文件拷到项目的WEB-INFlib目录下。把其中的src目录下的FCKeditor.tld文件copy到TestFCKedit/FCKeitor/WEB-INF/下

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

　　5. 修改合并后的web.xml文件，将名为SimpleUploader的Servlet的enabled参数值改为true，
　　以答应上传功能，Connector Servlet的baseDir参数值用于设置上传文件存放的位置。
　　添加标签定义:
　　taglib
　　taglib-uri/TestFCKeditor/taglib-uri
　　taglib-location/WEB-INF/FCKeditor.tld/taglib-location
　　/taglib

　　运行图：

　　6. 上面文件中两个servlet的映射分别为：/editor/filemanager/browser/default/connectors/jsp/connector
　　和/editor/filemanager/upload/simpleuploader，需要在两个映射前面加上/FCKeditor，
　　即改为/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connector和
　　/FCKeditor/editor/filemanager/upload/simpleuploader。

　　7.进入SKIN文件夹，假如你想使用fckeditor默认的这种奶黄色，
　　那就把除了default文件夹外的另两个文件夹直接删除.

　　8.删除/FCKeditor/目录下除fckconfig.js, fckeditor.js, fckstyles.xml, fcktemplates.xml四个文件以外的所有文件
　　删除目录/editor/_source,
　　删除/editor/filemanager/browser/default/connectors/下的所有文件
　　删除/editor/filemanager/upload/下的所有文件
　　删除/editor/lang/下的除了fcklanguagemanager.js, en.js, zh.js, zh-cn.js四个文件的所有文件

　　9.打开/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' ;
　　
　　

　　10.其它
　　fckconfig.js总配置文件，可用记录本打开，修改后将文件存为utf-8 编码格式。找到：

　　FCKConfig.TabSpaces = 0 ; 改为FCKConfig.TabSpaces = 1 ; 即在编辑器域内可以使用Tab键。

　　假如你的编辑器还用在网站前台的话，比如说用于留言本或是日记回复时，那就不得不考虑安全了，
　　在前台千万不要使用Default的toolbar，要么自定义一下功能，要么就用系统已经定义好的Basic，
　　也就是基本的toolbar，找到：
　　FCKConfig.ToolbarSets["Basic"] = [
　　['Bold','Italic','-','OrderedList','UnorderedList','-',/*'Link',*/'Unlink','-','Style','FontSize','TextColor','BGColor','-',
　　'Smiley','SpecialChar','Replace','Preview'] ] ;
　　这是改过的Basic，把图像功能去掉，把添加链接功能去掉，因为图像和链接和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' ;
　　

　　7.添加文件 /TestFCKeditor/test.jsp:
　　%@ page language="java" import="com.fredck.FCKeditor.*" %
　　%@ taglib uri="/TestFCKeditor" prefix="FCK" %
　　script type="text/javascript" src="/TestFCKeditor/FCKeditor/fckeditor.js"/script

　　%--
　　三种方法调用FCKeditor
　　1.FCKeditor自定义标签 (必须加头文件 %@ taglib uri="/TestFCKeditor" prefix="FCK" % )
　　2.script脚本语言调用 (必须引用 脚本文件 script type="text/javascript" src="/TestFCKeditor/FCKeditor/fckeditor.js"/script )
　　3.FCKeditor API 调用 (必须加头文件 %@ page language="java" import="com.fredck.FCKeditor.*" % )
　　--%
　　
　　%--
　　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
　　--%

　　form action="show.jsp" method="post" target="_blank"
　　table border="0" width="700"trtd
　　textarea id="content" name="content" style="WIDTH: 100%; HEIGHT: 400px"input/textarea
　　script type="text/javascript"
　　var oFCKeditor = new FCKeditor('content') ;
　　oFCKeditor.BasePath = "/TestFCKeditor/FCKeditor/" ;
　　oFCKeditor.Height = 400;
　　oFCKeditor.ToolbarSet = "Default" ;
　　oFCKeditor.ReplaceTextarea();
　　/script
　　input type="submit" value="Submit"
　　/td/tr/table
　　/form

　　%--
　　form action="show.jsp" method="post" target="_blank"
　　%
　　
　　 FCKeditor oFCKeditor ;
　　oFCKeditor = new FCKeditor( request, "content" ) ;
　　oFCKeditor.setBasePath( "/TestFCKeditor/FCKeditor/" ) ;
　　oFCKeditor.setValue( "input" );
　　out.println( oFCKeditor.create() ) ;
　　%
　　br
　　input type="submit" value="Submit"
　　/form
　　--%
　　

　　添加文件/TestFCKeditor/show.jsp:
　　%
　　String content = request.getParameter("content");
　　out.print(content);
　　%

　　8.浏览http://localhost:8080/TestFCKeditor/test.jsp
　　ok!