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.onload=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（快捷键） 是强制刷新
继续努力中。。。。。。。。。。。。。。