FCKeditor在JSP开发中的使用

javascript替换textarea

<script type="text/javascript" src="<%=request.getContextPath() %>/fckeditor/fckeditor.js"></script>  
<script type="text/javascript">   
window.onload = function(){   
    var oFCKeditor = new FCKeditor( 'content' ) ;   
    oFCKeditor.BasePath = '<%=request.getContextPath() %>/fckeditor/' ;   
    oFCKeditor.Config["CustomConfigurationsPath"]="<%=request.getContextPath() %>/fckeditor/myconfig.js";//定义自定义的配置文件  
    //oFCKeditor.Height='500';//高度  
    //oFCKeditor.Width='900';//宽度  
    //oFCKeditor.ToolbarSet='Default';//显示的toolbar的内容  
    oFCKeditor.ReplaceTextarea() ;   
}   
</script>   
<textarea name="content" rows="18" cols="100" id="content"></textarea>

在JSP中应用标签库(必须有相应的jar文件)

<%@taglib uri="http://java.fckeditor.net" prefix="FCK" %>  
<FCK:editor instanceName="myeditor" basePath="/fckeditor/" value="初始值"></FCK:editor>

配置FCKeditor

直接修改主配置文件fckconfig.js
定义单独的配置文件(只需要写需要修改的配置项)
在页面的调用代码中对FCKeditor的实例进行配置

配置加载的顺序:

加载主配置文件fckconfig.js
加载自定义的配置文件(如果有),覆盖相同的配置项
使用对实例的配置覆盖相同的配置项(只对当前实例有效)

一般需要修改的配置

自定义的ToolbarSet,去掉一些功能
- (1) 定义FCKConfig.ToolbarSets["mytoolbar"] = [];里面的内容参照Default修改
- (2) 再在实例化的时候加载该toolbar:oFCKeditor.ToolbarSet='mytoolbar';或者直接修改主配置文件的FCKConfig.ToolbarSets["Default"]里面的内容.
加上几种常用的字体

FCKConfig.FontNames='宋体;楷体_GB2312;黑体;隶书;Times New Roman;Arial';

修改"回车"和"Shift+回车"的换行行为

FCKConfig.EnterMode = 'br' ; // p | div | br  
FCKConfig.ShiftEnterMode = 'div' ; // p | div | br

修改编辑区样式文件

自己写一个css文件,再加载它:FCKConfig.EditorAreaCSS='mycss.css'
或者直接在原文件中改,原文件为:FCKConfig.EditorAreaCSS = FCKConfig.BasePath + 'css/fck_editorarea.css';

更换表情图片

FCKConfig.SmileyPath = FCKConfig.BasePath + 'images/smiley/mypic/' ;//图片所在的位置,下面是名字  
FCKConfig.SmileyImages = ['1.gif','2.gif','3.gif','4.gif','5.gif','6.gif','7.gif','8.gif','9.gif','10.gif'];
FCKConfig.SmileyColumns = 6 ;//每行显示的表情图片数  
FCKConfig.SmileyWindowWidth = 600 ;//显示的宽度  
FCKConfig.SmileyWindowHeight = 480 ;//显示的高度

注意:要想显示以上设置的宽度和高度,则需要:

更改fckeditor/editor/dialog/fck_smiley.html源文件,将dialog.SetAutoSize(true) ;注释掉,表示不自动根据浏览器尺寸显示,而是根据设置的宽度和高度
将改为,自动判断是否显示滚动条

JSP中实现文件上传

配置

实现连接器的servlet

(1) 在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>

(2) 在src目录中创建fckeditor.properties,内容为

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

上传不同类型的文件

默认情况下只能上传4种文件:File,Image,Flash,Media.

在Image中点"浏览服务器"只能上传图片文件,Flash和Media同理,在"插入超链接"中,可以选择上传任意这4种文件.

上传的这些文件保存在当前应用的userfiles目录中(该目录自动创建),并且分别在File,Image,Flash,Media子目录中.这些目录均可在fckeditor.properties中修改,详见文档说明.

要想能够上传自己定义的文件,可以配置相关文件,这里以可以再image中上传一个.sun后缀名的文件为例,要做2步:

(1) 服务器中的验证,修改fckeditor.properties文件,在原fckeditor-java-core-xxx.jar中的handlers,有该properties文件的默认定义,可以参照写过来.

在fckeditor.properties增加以下内容:

connector.resourceType.image.extensions.allowed = bmp|gif|jpeg|jpg|png|sun

(2) 客户端中的验证,修改fckconfig.js文件,或者自己写自定义的文件,覆盖下面的属性:

FCKConfig.ImageUploadAllowedExtensions = ".(jpg|gif|jpeg|png|bmp|sun)$" ; // empty for all

控制上传的文件的大小

默认情况下,文件大小不收限制.修改原servlet文件,并且修改错误回调显示函数

(在文件上传方面的控制,由于不同版本,可能方法有所不同)