FCKeditor在JSP开发中的使用11
鲜于仰岳
一.javascript替换textarea
<s cript type="text/javascript" src="<%=request.getContextPath() %>/fckeditor/fckeditor.js"></script>
<s cript 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
1.直接修改主配置文件fckconfig.js
2.定义单独的配置文件(只需要写需要修改的配置项)
3.在页面的调用代码中对FCKeditor的实例进行配置
配置加载的顺序:
1.加载主配置文件fckconfig.js
2.加载自定义的配置文件(如果有),覆盖相同的配置项
3.使用对实例的配置覆盖相同的配置项(只对当前实例有效)
四.一般需要修改的配置
1.自定义的ToolbarSet,去掉一些功能
1).定义FCKConfig.ToolbarSets["mytoolbar"] = [] ;里面的内容参照Default修改
2).再在实例化的时候加载该toolbar:oFCKeditor.ToolbarSet='mytoolbar';
或者直接修改主配置文件的FCKConfig.ToolbarSets["Default"]里面的内容.
2.加上几种常用的字体
FCKConfig.FontNames='宋体;楷体_GB2312;黑体;隶书;Times New Roman;Arial';
3.修改"回车"和"Shift+回车"的换行行为
FCKConfig.EnterMode = 'br' ; // p | div | br
FCKConfig.ShiftEnterMode = 'div' ; // p | div | br
4.修改编辑区样式文件
自己写一个css文件,在加载它:FCKConfig.EditorAreaCSS='mycss.css'
或者直接在原文件中改,原文件为:FCKConfig.EditorAreaCSS = FCKConfig.BasePath + 'css/fck_editorarea.css' ;
5.更换表情图片
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',
'11.gif','12.gif','13.gif','14.gif','15.gif','16.gif','17.gif','18.gif','19.gif','20.gif',
'21.gif','22.gif','23.gif','24.gif','25.gif','26.gif','27.gif','28.gif','29.gif','30.gif',
'31.gif','32.gif','33.gif','34.gif','35.gif','36.gif','37.gif','38.gif','39.gif','40.gif',
'41.gif','42.gif','43.gif','44.gif','45.gif','46.gif','47.gif','48.gif','49.gif','50.gif',
'51.gif','52.gif','53.gif','54.gif','55.gif','56.gif','57.gif','58.gif','59.gif','60.gif',
'61.gif','62.gif','63.gif','64.gif','65.gif','66.gif','67.gif','68.gif','69.gif','70.gif',
'71.gif','72.gif','73.gif','74.gif','75.gif','76.gif','77.gif','78.gif','79.gif','80.gif',
'81.gif','82.gif','83.gif','84.gif','85.gif','86.gif','87.gif','88.gif','89.gif'] ;
FCKConfig.SmileyColumns = 6 ;//每行显示的表情图片数
FCKConfig.SmileyWindowWidth = 600 ;//显示的宽度
FCKConfig.SmileyWindowHeight = 480 ;//显示的高度
注意:要想显示以上设置的宽度和高度,则需要
1).更改fckeditor/editor/dialog/fck_smiley.html源文件,将dialog.SetAutoSize( true ) ;注释掉,表示不自动根据浏览器尺寸显示,而是根据设置的宽度和高度
2).将<body style="overflow:hide">改为<body style="overflow: auto">,自动判断是否显示滚动条
五.JSP中实现文件上传
1.配置
实现连接器的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
2.上传不同类型的文件
默认情况下只能上传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
3.控制上传的文件的大小
默认情况下,文件大小不收限制.修改原servlet文件,并且修改错误回调显示函数
(在文件上传方面的控制,由于不同版本,可能方法有所不同)
类似资料：