简单介绍:http://www.cnblogs.com/psforever/archive/2011/08/03/2126715.html
较详细介绍:http://huibin.iteye.com/blog/714069
自己使用情况:
·下载文件:FCKeditor_2.6.7.zip、fckeditor-java-2.6-bin.zip,另外再下载一个jar包:slf4j-simple-1.5.8.jar(缺少此包会报错)
所有Jar包:
·将fckeditor文件夹拷贝至项目WebRoot下面
·在自己需要引用的页面中使用如下代码:
<scripttype="text/javascript" src="fckeditor/fckeditor.js"></script><!—注意:引
用外部文件时一定要在后面单独加</script>结束标记--à
使用javascript方法:
·调用的简单代码:
<scripttype="text/javascript">
var editor =new FCKeditor('标签名');
editor.BasePath = '/项目名/fckeditor/';
editor.Height = 200;
editor.ToolbarSet = 'Default';
editor.Create();
</script>
使用替换textarea方法:
·调用的简单代码:
·添加
<scripttype="text/javascript">
window.onload = function(){
var editor = newFCKeditor('myTextArea');
editor.BasePath ="/项目名/fckeditor/";
editor.ReplaceTextarea();
}
</script>
·使用:
<textarea name="myTextArea" rows="6"cols="4"/>
使用jsp标签:
<%@taglib prefix="FCK" uri="http://java.fckeditor.net"%>
<FCK:editor instanceName="myEditor" basePath="/fckeditor" value="hello"></FCK:editor>
覆盖默认配置属性:
方法1:先完成Myconfig.js中的配置,然后修改fckconfig.js的配置:
FCKConfig.CustomConfigurationsPath= '/项目名称/配置名称' ;
方法2:使用javascript指定文件:
在 var editor = new FCKeditor('myTextArea');之后我们添加语句:
editor.Config["CustomConfigurationsPath"]="/项目名称/配置文件名称";
例如:
<scripttype="text/javascript">
vareditor = new FCKeditor("text");
editor.BasePath= "/Test/fckeditor/";
editor.ToolbarSet= 'Default';
editor.Config['CustomConfigurationsPath']='/Test/Myconfig.js';
editor.Create();
</script>
说明:
FCKConfig.BasePath = /项目名/feckeditor/editor/
FCKConfig.EditorPath = /项目名/feckeditor/
表情图片处理:
1:调整头像显示的窗体大小:
修改:安装路径\fckeditor\editor\dialog\fck_smiley.html文件
让窗体自动适应,这里我们应该注释它,让窗体大小固定:dialog.SetAutoSize(true ) ;
这里设置让滚动条显示,修改为auto<bodystyle="overflow:hidden">
2:添加自定义表情图片:
图片添加路径:安装路径\fckeditor\editor\images\smiley\msn (将自己的图片放入该文件夹下,也可以自己配置文件夹,但需要修改配置)
FCKConfig.SmileyPath =FCKConfig.BasePath+ 'images/smiley/msn/' ;//可以在此处修该文件夹目录
FCKConfig.SmileyImages=['regular_smile.gif','sad_smile.gif','wink_smile.gif','teeth_smile.gif','kiss.gif','envelope.gif,'自己的图片插入'] ;
FCKConfig.SmileyColumns= 8 ;
FCKConfig.SmileyWindowWidth = 320 ;
FCKConfig.SmileyWindowHeight = 210 ;
文件(包含图片)上传功能:
1:在web.xml中添加:
<servlet>
<servlet-name>ConnectorServlet</servlet-name>
<servlet-class>
net.fckeditor.connector.ConnectorServlet
</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>ConnectorServlet</servlet-name>
<url-pattern>
/fckeditor/editor/filemanager/connectors/*
</url-pattern>
</servlet-mapping>
上面的类在fckeditor-core中已经存在,无需编写
2:在classpath(src或者classes)下添加fckeditor.properties文件,并添加语句:
connector.userActionImpl=net.fckeditor.requestcycle.impl.EnabledUserAction
3:FCKEditor2.6版本上传中文图片和创建中文文件夹没有问题,可以直接使用,如果出现问题可以查看上面我们servlet映射的java文件,看它是否处理了接受的参数,如果没有,则我们自己复制该类重新编写,并处理、配置。
4:文件上传(以图片上传为例)我们要分服务端与客户端考虑:
客户端:参考fckconfig.js:FCKConfig.ImageUploadAllowedExtensions = ".(jpg|gif|jpeg|png|bmp)$" ; 并添加到自己定义的Myconfig.js文件中(在这里我们可以自己添加文件类型)
服务端:参考我们下载的java包:fckeditor-java-core-2.6.jar\net\fckeditor\handlers\default.properties 找到配置项:connector.resourceType.image.extensions.allowed =bmp|gif|jpeg|jpg|png,并添加到fckeditor.properties文件中(在这里我们可以自己添加文件类型,但是我修改后就是不行,但是我把原有类型修改后是有效的)
实验遇到的问题:
·修改了html文件后,在浏览器上不显示自己的设置和内容时,我们可以尝试去除浏览器的缓存。