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"]
里面的内容.
- (1) 定义
加上几种常用的字体
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文件,并且修改错误回调显示函数
(在文件上传方面的控制,由于不同版本,可能方法有所不同)