FCKeditor编辑功能的使用
1 、下载并解压FCKeditor放于WebRoot目录下
2、在使用页面引入fckeditor目录下的fckeditor.js
<script type="text/javascript" src="./fckeditor/fckeditor.js"></script>
使用如下代码调用显示
<script type="text/javascript">
window.onload = function() {
var onFCKeditor = new FCKeditor("content");
//创建对象(参数为要替代的textarea标签的名字)
onFCKeditor.BasePath = '../../fckeditor/';
//指定路径最后面,注:必须加'/'
onFCKeditor.Height = 200;
onFCKeditor.ToolbarSet = 'Basic';
//基本功能用Basic;默认用Default
onFCKeditor.ReplaceTextarea();
//创建编辑器
}
</script>
<textarea rows="10" cols="80" name="content">${gb.content}</textarea>
3、指定自定义配置文件:
创建myconfig.js放于fckeditor目录下,修改该目录下的FCKConfig.CustomConfigurationsPath的配置(即:引入自定义配置文件)如下:
FCKConfig.CustomConfigurationsPath =FCKConfig.EditorPath+'myconfig.js';
//alert(FCKConfig.BasePath); 打印FCKConfig.BasePath的值(代表editor目录)
myconfig.js的内容如下(此处的配置会自动覆盖fckconfig.js中的默认配置):
//设置自定义toolbar的功能(配置可以参考fckconfig.js的内容)
FCKConfig.ToolbarSets["HLTools"] = [
['Source','DocProps','-','Save','NewPage','Preview','-','Templates'],
['Bold','Italic','Underline','StrikeThrough'],
['OrderedList','UnorderedList','-','Outdent','Indent'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],
'/',
['Style','FontFormat','FontName','FontSize'],
['TextColor','BGColor'],
['FitWindow','-','About']
] ;
FCKConfig.ToolbarSets["Basic2"] = [
['Source'],
['Bold','Italic','Underline'],
['OrderedList','UnorderedList'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],
'/',
['FontName','FontSize'],
['TextColor','BGColor'],
['FitWindow']
] ;
//默认情况下enter键表示产生新的段落,shift+enter表示换行
//这里更换快捷方式enter表示换行,shift+enter表示新的段落
FCKConfig.EnterMode = 'br' ; // p | div | br
FCKConfig.ShiftEnterMode = 'p' ; // p | div | br
//设置自定义的字体类型
//FCKConfig.FontNames = 'Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;
FCKConfig.FontNames = '宋体;楷体_GB2312;黑体;隶书;Times New Roman;Arial';
//配置自定义的表情文件库
FCKConfig.SmileyPath = FCKConfig.BasePath + 'images/myimg/' ;
FCKConfig.SmileyImages = ['0.gif','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'] ;
FCKConfig.SmileyColumns = 5 ;
FCKConfig.SmileyWindowWidth = 700;
FCKConfig.SmileyWindowHeight = 400 ;
4、用过js获取编辑器的内容
<script type="text/javascript" language="javascript">
function a()
{
//得到控件的html
var checkContent =FCKeditorAPI.GetInstance("FCKeditor1").GetXHTML();
alert(checkContent);
//得到html的长度
var len = FCKeditorAPI.GetInstance("FCKeditor1").GetXHTML().length;
alert(len);
//得到fck控件
var oEditor = FCKeditorAPI.GetInstance('FCKeditor1');
//得到编辑器中的文字
var text = oEditor.EditorDocument.body.innerText;
alert(text);
//让编辑器得到焦点
oEditor.Focus();
}
</script>
文件上传功能的使用
1、在web.xml中配置上传文件所使用的类()的servlet映射
<!--FCKeditor上文功能配置 -->
<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、创建配置文件fckeditor.properties放于ClassPath目录,即src文件夹下。
文件内容为:
connector.userActionImpl = net.fckeditor.requestcycle.impl.UserActionImpl
3、配置自定义文件上传路径,直接在fckeditor.properties文件中加入如下配置(下面为相对路径):
connector.userFilesPath=/upload/fckFile
connector.userFilesAbsolutePath =/upload/fckFile
4、加载上传文件所需要的jar包,commons-fileupload-1.3.1.jar、commons-io-2.4.jar、imageinfo-1.9.jar、java-core-2.6.jar、slf4j-api-1.5.8.jar和slf4j-simple-1.5.8.jar
5、解决上传问价中文乱码问题:
将tomcat中server.xml测Connector配置中加入对对请求路径编码的配置 URIEncoding=”UTF-8”
<Connector port="8089" protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443" URIEncoding="UTF-8"/>
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文件
6.如果你是使用javascrīpt来调用加载FCKeditor,那就不需要在web.xml中配置fckeditor的tag文件。