快速掌握FCKEditor和CKEditor

[size=medium]
其一：FCKEditor
首先上官方网站：www.fckeditor.net
下载FCKeditor_2.6.3.zip，将其中的fckeditor文件夹复制到WebRoot下面，后面可以直接使用
下一步（这一步不是必须的）:
找到fckconfig.js文件进行编辑，可参考FCKConfig.ToolbarSets["Default"] =[ ]
[ ]里面的选项可根据自己喜好进行选择，然后取名FCKConfig.ToolbarSets["你取的工具条名称"]
接下来如果想在页面通过标签嵌入方式显示效果的话
必须添加java-core2.4.jar包来获取FCK的相应标签
<%@ taglib uri="http://java.fckeditor.net" prefix="FCK" %>
<FCK:editor instanceName="content" value=" " width="85%" height="300px" toolbarSet="你刚才取的名字">
<FCK:config SkinPath="skins/silver/" AutoDetectLanguage="true" />
</FCK:editor>
当然这里面的toolbarSet可以不写就用默认的工具条布局模式
1. 标签方式话代码如下
<%@ taglib uri="http://java.fckeditor.net" prefix="FCK" %>
省略中间标签
<FCK:editor instanceName="content" value=" " width="85%" height="300px">
<FCK:config SkinPath="skins/silver/" AutoDetectLanguage="true" />
</FCK:editor>
2.JavaScript方式的话不需导入标签库
<script type="text/javascript">
window.onload(function(){
var oFCKeditor=new FCKeditor('MyTextarea');
oFCKeditor.BasePath="fckeditor/";
oFCKeditor.ReplaceTextarea();
});
</script>
<textarea rows="4" cols="60" name="MyTextarea"></textarea>
其二：CKEditor则更加方便快捷
首先从官方网站上：www.fckeditor.net
下载ckeditor_3.2.zip，将其加压，把ckeditor文件夹复制到WebRoot下面
第一种方式：通过设定textarea的类名为ckeditor即可替换：
...省略导入文件语句
<textarea class="ckeditor" rows="10" cols="80" name="editor1"> </textarea>
第二种方式：通过代码替换
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="ckeditor/_samples/sample.js"></script>
<link rel="stylesheet" type="text/css" href="ckeditor/_samples/sample.css">
<textarea rows="10" cols="80" name="editor1"> </textarea>
<script type="text/javascript">
//<![CDATA[

CKEDITOR.replace( 'editor1',
{
fullPage : true
});

//]]>
</script>
其中：,{fullPage:true}可以省略
其三：CKEditor的皮肤更换
(1)定制皮肤：卡马，office2003,第二版皮肤
CKEDITOR.replace( 'editor_kama',
{
skin : 'kama'
});
其中eidor_kama为textera的名称，可以改变。
skin可选的值有v2,office2003,kama
(2)用户界面颜色选择器
CKEDITOR.replace( 'editor1',
{

extraPlugins : 'uicolor',
uiColor: 'yellow',
toolbar :
[
[ 'Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink' ],
[ 'UIColor' ]
]
});
其中uiColor的值为初始页面的颜色可以为各种颜色green,yellow,red,blue等等
['UIColor']为真正出现的在工具条中的颜色选择器

其他功能如添加语言分类,淘宝网的选择在飞模式。比较麻烦参考下载包中samples中的index.jsp即可[/size]