当前位置: 代码迷 >> Web前端 >> FCK的施用简介
  详细解决方案

FCK的施用简介

热度:217   发布时间:2012-11-01 11:11:32.0
FCK的使用简介

引入网页:

?? ?首先下载附件中FCK提高的编辑器代码,也可以到其官方网站http://www.fckeditor.net去下载和看帮助文档。

?? ?把FCKeditor_2.6.3.zip解压copy里面的fckeditor到我们的工程中,再 把fckeditor-java-2.4-bin.zip里面的5个jar包copy到lib下面去。FCK提供了几种引入方式:

?

  • ?? ?通过js调用。引入<script type=text/javascript src=fckeditor/fckeditor.js></script>,在需要插入编辑器的地方通过下面代码创建
     var oFCKeditor=new FCKeditor('eidtor');
    oFCKeditor.BasePath="/fckTest/fckeditor/";
    oFCKeditor.Create();
       
  • ?? 通过jsp标签调用。引人<%@ taglib uri="http://java.fckeditor.net" prefix="fck"%>,在需要插入编辑器的地方通过下面代码创建
    <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),但是它自带的东西不满足我们的需求,而且老外的东西当我们处理中文名字的图片会有乱码,所以需要修改,要进行图片上传首先做以下事情

?

  1. 在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,限制文件上传大小等需求可以自己去探索研究哈。

?

?

给FCK瘦身:删除fckeditor目录下面所有以“_”开头的文件或者文件夹,像"_samples"、"_documentation.html“等

???? 删除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里面设置。

?

?

?

  相关解决方案