2009-09-12 星期六
Fckeditor自学笔记
作者:傲世狂少
背景:准备协同OA应用的开发中,编辑器控件是必不可少的一个重要应用,而FCKeditor的强大功能和出色表现当然是首选,为了能在项目中很好的并且熟练的使用它,加上最近气候转冷,小雨绵绵,故此就利用休假时间将其熟悉,以备战啊。。。
为了以后能有文档查看,就在学习中记录了下来,一遍来日再用。。。简单理解,请高手看了,多多指教。。。。
一、自我认识:
1、类似world的编辑器
2、所见即所得的编辑器
二、资料下载:
1、官方网站:http://www.fckeditor.net/
2、Docs文档页面
3、Download页面
4、FCKeditor2.***.zip和FCKeditor.Java
需要下载fckeditor-java-2.5-bin.zip
演示工程:fckeditor-java-demo-2.5.war
5、在项目中要用到的是:FCKeditor2.***.zip和fckeditor-java-2.5-bin.zip
6、例子:default.html(可以参看它的使用方法)
三、安装使用与配置(主要的两种方法):
1、解压FCKeditor2.***.zip,将其下面的fckeditor文件夹拷贝到工程项目的WebRoot下边。
2、FCKeditor的调用方式:
第一种调用方式:通过javascript调用
可以参考:
1、附带的例子(FCKeditor_2.***/fckeditor/_samples/default.html)右键查看源文件
2、文档
方法一(创建并且输出一个编辑器):
Step1:在网页<head></head>中加入
//引入js文件
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
Step2:创建FCKeditor对象
<script type="text/javascript">
//新建一个fckeditor的实例,它的名字叫FCKeditor1
var oFCKeditor =new FCKeditor("FCKeditor1");
//设置编辑器的基准路径(必须以"/"结尾)
//(注意默认的"/fckeditor/"中的第一个“/”指的是当前站点,即:http://localhost:8080/fckeditor)
//所以我们必须改一下,在前边加上我们的工程名,例如“/myPro/fckeditor/”)
oFCKeditor.BasePath="/fckeditor/";
//创建并且输出一个编辑器
oFCKeditor.Create();
</script>
方法二(用编辑器替换一个textarea):
Step1:在网页<head></head>中加入
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
并且加入onload方法
<script type="text/javascript">
window.οnlοad=function()
{
//此处的MyTextarea必须和boday中的textarea的name属性相同
var oFCKeditor = new FCKeditor('MyTextarea');
oFCKeditor.BasePath="/fckeditor/";
oFCKeditor.ReplaceTextarea();
}
</script>
step2:在boday中加入要替换的textarea元素
<textarea id="MyTextarea" name="MyTextarea">This is <b>the</b> inital value.</textarea>
3、FCKeditor对象的属性
属性名 描述 默认值
Width 宽度 100%
Height 高度 200
Value 编辑器初始化内容 (空字符串)
ToolbarSet 工具条集合的名称
(内置有Default和Basic,也可自定制) Default
BasePath 编辑器的基准路径 /fckeditor/
4、构造器:
var FCKeditor = function(instanceName, width, height, toobarSet, value)
* 其中 instanceName 为编辑器输出的texteara元素的name属性的值,必须指定
*参数会赋值给同名属性(可以指定也可不指定)
第二种调用方式:在jsp中通过自定义标签调用
可以参考:
1、演示工程fckeditor-java-demo-2.5.war(找发布后对应的jsp文件)
2、fckeditor-java-2.5的文档(site文件下)
step1:
解压fckeditor-java-2.5-bin.zip
将提供的jar包拷贝到工程的WEB-INF/lib目录里
(fckeditor-java-core-2.5.jar和lib文件里的jar包(commons-fileupload-1.2.1,commons-io-1.3.2,slf4j-api-1.5.8,imageinfo-1.9)
可以在演示工程里将slf4j-simple-1.5.8.jar拷贝过来)
step2:
//引入自定义标签
<%@ taglib uri="http://java.fckeditor.net" prefix="FCK"%>
step3:
//注意此处的value属性必须有值否则会抛出空指针异常,所以就value=" "可以了,不能是空字符串,可以加个空格
<FCK:editor instanceName="myEditor" basePath="/fckeditor" value="this is content"></FCK:editor>
jsp自定义标签调用注意点:
1、BasePath以“/”开头,并且这个“/”代表当前工程的路径
2、一定要设置value属性的值,并且值不能是空字符串
四:配置FCKeditor
1、配置文件的使用(feckeditor/fckconfig.js)---主配置文件(所有可配置的项)
2、修改配置其实就是修改FCKConfig这个对象的属性,一般情况下我们不这样做,我们采用一个额外的配置文件来覆盖默认的配置
步骤:
1、在webroot下新建一个js文件(myconfig.js)
//是否自动检测语言
FCKConfig.AutoDetectLanguage=false;
//默认语言为英文
FCKConfig.DefaultLanguage="en";
告诉编辑器使用我们自己的配置文件:
方法一:在fckcofig.js中指定(注意我们把myconfig.js放到了Webroot下,所以指定路径为)
FCKConfig.CustomConfigurationsPath='/mypro/myconfig.js';
方法二:在页面中调用FCKeditor时指定配置
var oFCKeditor = new FCKeditor("FCKeditor1");
oFCKeditor.Config["CustomConfigurationsPath"]="/mypro/myconfig.js";
oFCKeditor.Create();
总结:配置FCKeditor有三种方法:
第一种:直接修改主配置文件fckconfig.js文件
第二种:定义单独的配置文件(只需要写需要修改的配置项)
第三种:在页面的调用代码中对FCKeditor的实例进行配置
配置加载顺序:
1、加载主配置文件fckconfig.js
2、加载自定义的配置文件(如果有),覆盖相同的配置项
3、使用对实例的配置覆盖相同的配置项(只对当前实例有效)
注意事项:
1、系统会自动侦测并运用适当的界面语言(默认,可以修改)
2、无论什么情况都不能删除主配置文件fckconfig.js
3、修改配置后要清空浏览器的缓存,以免影响结果(或访问时强制刷新也可以)
*在IE中 Ctrl+F5 (快捷键)是强制刷新
*在FireFox中 Shift+Ctrl+R(快捷键) 是强制刷新
继续努力中。。。。。。。。。。。。。。