FCKeditor
简介
FCKeditor是一种通用的文本编辑器插件。
使用FCKeditor插件准备工作
第一步：导入FCKeditor插件文件
第二步：加入的JAR包，如下图所示
在页面中使用FCKeditor插件
做好以上准备工作后，我们就要分别在HTML文件和JSP文件中调用FCKeditor插件，把文本编辑器使用在我们的项目中。
如何在HTML文件中使用FCKeditor
在HTML文件中插入FCKeditor插件有2种方式：
1．在<head></head>部分中导入fckeditor.js文件，在<body></body>部分使用<script></script>标签
<head>
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>//导入fckeditor.js文件
</head>
<body>
<script type="text/javascript">
var oFCKeditor = new FCKeditor('FCKeditor1'); //新建FCKeditor对象 名称FCKeditor1
oFCKeditor.BasePath = "/fckeditor/fckeditor/" ; //设置基准路径
oFCKeditor.Value = "initial value";
oFCKeditor.Toolbarset = "Default"; //引用工具集类型
oFCKeditor.Create(); //调用Create方法 创建并且输出一个文本框输出
</script>
</body>
2．在<body></body>部分编写<textarea></textarea>标签，标签中的name表示调用FCKeditor对象名称，在<head></head>部分中 首先导入fckeditor.js文件，然后编写Fckedirot对象。
<head>
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
<script type="text/javascript">
window.onload = function(){ //网页文档加载完后 执行下列代码
var oFCKeditor = new FCKeditor( 'MyTextarea' ) ; //创建FCKeditor对象
oFCKeditor.BasePath = "/fckeditor/fckeditor/" ; //fckeditor文件目录
oFCKeditor.Width = "80%"; //设置文本编辑器长度
oFCKeditor.Height = "50%"; //设置文本编辑器宽度
oFCKeditor.Value = "this is FCKeditor value"; //文本编辑器初始内容
oFCKeditor.ToolbarSet = "Default"; //工具集名称
oFCKeditor.ReplaceTextarea();
</script>
</head>
<body>
<textarea rows="4" cols="60" name="MyTextarea">this is myFCKeditor</textarea><!—name 要调用FCKeditor对象名称 -->
</body>
如何在JSP文件中使用FCKeditor
<%@ taglib uri="http://java.fckeditor.net" prefix="FCK" %> //在JSP文件中加入FCKeditor标签库
<body>
<FCK:editor instanceName="EditorDefault" toolbarSet="Default" value="this is myFckeditor"></FCK:editor> <!-- toolbarSet可选简单版本Basic -->
</body>
自定义
//自定义表情
FCKConfig.SmileyPath = FCKConfig.BasePath + 'images/smiley/mygimss/' ; //表情图片所在的路径是一个文件夹
FCKConfig.SmileyImages = ['1.gif','2.gif','3.gif','4.gif','5.gif','6.gif','7.gif','8.gif','9.gif','10.gif'] ; //配置要显示上面文件夹里的哪些图片
FCKConfig.SmileyColumns = 5 ; //每行显示几个图片
FCKConfig.SmileyWindowWidth = 640 ; //显示表情图片的宽度
FCKConfig.SmileyWindowHeight = 320 ; //显示表情图片的高度
通过自定义表情图片 我们会发现 表情图片框的大小总是不合适 而我们自己定义的宽高貌似也不起作用，下面我们介绍如何使用自定义表情图片框大小。如下图所示：
我们根据页面属性找到路径fckeditor文件夹下editor文件家中dialog文件夹下的fck_smiley.html文件，fck_smiley.html就是管理表情图片样式的文件，但我们如何修改了就可以让我们逞心如意了呢？那么我们就来解决第一个问题，无法显示我们自定义的宽高问题：
window.onload = function ()
{
// First of all, translate the dialog box texts
oEditor.FCKLanguageManager.TranslatePage(document) ;
//dialog.SetAutoSize( true ) ; //默认会以页面大小自动显示表情图片框大小
}
从页面上我们终于可以显示自定义表情图片的宽高了，而我们发现我们把表情图片框的高度调到我们满意的尺寸，而里面的图片又不满意了，有些图片无法完全显示了，我们这是就想到了滚动条：
<body style="overflow: auto"> <!-- style="overflow: auto" auto是在必要的情况下显示滚动条 -->
……….
………..
</body>
自此，我们的自定义表情图片算是大功告成了！鼓鼓掌，呵呵~~~
