引入网页:
首先下载附件中FCK提高的编辑器代码,也可以到其官方网站http://www.fckeditor.net去下载和看帮助文档。
把FCKeditor_2.6.3.zip解压copy里面的fckeditor到我们的工程中,再 把fckeditor-java-2.4-bin.zip里面的5个jar包copy到lib下面去。FCK提供了几种引入方式:
var oFCKeditor=new FCKeditor('eidtor'); oFCKeditor.BasePath="/fckTest/fckeditor/"; oFCKeditor.Create();
<fck:editor instanceName="editor" basePath="/fckeditor" value=" " width="90%" height="300" toolbarSet="DEFAULT"/>
属性名 |
描述 |
默认值 |
Width |
宽度 |
100% |
Height |
高度 |
200 |
Value |
初始化值 |
空字符串 |
ToolbarSet |
工具条集合的名称(Basic|Default) |
Default |
BasePath |
编辑器的基路径 |
/fckeditor/ |
说明:value初始化时必须提供一个初始化值,通常为“ ”,因为如果不这样的话会报NullPointerExcepton,这也算FCK的一个Bug,不过也可以通过修改它net.fckeditor.FCKeditor解决,在我提供的例子中有说明。
自定义配置:
在属性中有一个ToolbarSet的工具条属性,默认为Default,实际上我们可以定义自己的属性条,方法是通过修改fckeditor下面的fckconfig.js,而更合理的方式是新建一个自己的配置文件newconfig.js,然后在在fckconfig.js中指定使用自己的配置文件也就是告诉其自己的配置文件在什么地方FCKConfig.CustomConfigurationsPath = '/fcktest/newconfig.js' ;
//设置自定义的工具栏
FCKConfig.ToolbarSets["DIY"] = [ ['Style','FontFormat'], ['FontName','FontSize','Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript','-','TextColor','BGColor'], '/', ['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'], ['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'], ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'], '/', ['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'], ['Link','Unlink','Anchor'], ['-','NewPage','Preview','FitWindow','ShowBlocks','Source'] ] ;
说明:[]代表的是一组,-代表的是竖分割线,/代表换行
此外,还可以自定义其他的配置,比如可以设置皮肤、更换字体、更换表情图片等。可以自己去研究……
FCK自带了一个后台图片上次的处理器(实际上是个Servlet),但是它自带的东西不满足我们的需求,而且老外的东西当我们处理中文名字的图片会有乱码,所以需要修改,要进行图片上传首先做以下事情
在src下新建一个文件fckeditor.properties 并在其中添加connector.userActionImpl=net.fckeditor.requestcycle.impl.UserActionImpl
2. 建立一个Connector,copy net.fckeditor.connector.ConnectorServlet的源码到我们自己定义的Connector,根据需求,上传的图片我们自己重命名,那么找到filename,用filename=ID.nextID()+"."+extension;替代。
3. 在Web.xml里面声明这个servlet
<servlet>
<servlet-name>ConnectorServlet</servlet-name> <servlet-class>connector.ConnectorServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>ConnectorServlet</servlet-name> <url-pattern>/fckeditor/editor/filemanager/connectors/*</url-pattern> </servlet-mapping>
4.其他方面,比如更改url,限制文件上传大小等需求可以自己去探索研究哈。
删除fckeditor目录下面除了,fckconfig.js fckpackage.xml fckstyles.xml fcktemplates.xml外的所有文件,当然要保留editor文件夹
删除fckeditor/editor/lang目录下面除了en.js、 zh-cn.js外的所有文件
删除fckeditor\editor\filemanager目录下面的connectors文件夹
删除editor\skins目录下面除了default下面的文件夹,这个里面是皮肤,共有三种,可以在fckconfig.js里面设置。