首先，建立一个wtp的web工程，解压fckeditor的压缩包，将压缩包下面的fckeditor目录拷贝到建立的web工程的webcontent目录下。
下面对fckedior目录下面的目录及文件作一个说明：(1) 开头的目录或文件为fckeditor的demo等资料，都可以在工程中删除 “_”(2) 目录editor该目录为fckeditor主要目录。
该目录为fckeditor的核心目录，包含了fckeditor的核心文件，其中：(1) 为fckeditor的源文件目录_source(2) 为fckeditor的样式文件目录css(3) 为fckeditor工具栏中相应的工具按钮的弹出对话框文件目录dialog(4) 为fckeditor处理文件上传的文件目录filemanager(5) 为fckeditor中增加表情头像等资源的图像文件目录images(6) 为fckeditor的核心javascript文件目录js(7) 为fckeditor的语言文件目录，包含国际化支持。lang(8) 为fckeditor的插件目录，fckeditor的插件开发文件都放入该目录plugins(9) 为fckeditor的皮肤文件，自带三种皮肤文件default,office2003和silver。
skins本文所写的插件开发，主要就是在plugins目录下进行的。下面说明如何编写fckeditor插件：(在编写插件的时候借鉴了fckeditor的插件placeholder，该插件也在plugins目录下)(1) 在plugins目录下面新建code目录(2) 在code目录下面新建lang目录目录结构如图所示：(3) 新建fckplugins.js文件，该文件为fckeditor插件的定义文件，内容如下：
//注册code命令.
fckcommands.registercommand( 'code', new fckdialogcommand( 'code', fcklang.codedlgtitle, fckplugins.items['code'].path + 'code.html', 340, 170 ) ) ;
// 注册名为”code”的工具栏按钮
var ocodeitem = new fcktoolbarbutton( 'code', fcklang.codebtn ) ;
ocodeitem.iconpath = fckplugins.items['code'].path + 'code.gif' ;
fcktoolbaritems.registeritem( 'code', ocodeitem ) ;
// 创建fckcodes对象，通过fckcodes对象处理工具栏按钮的操作
var fckcodes = new object() ;
说明：
通 过fckcommands的registercommand命令注册一个名为”code”的命令，new fckdialogcommand()说明”code”命令为一个对话框命令，fcklang.codedlgtitle为弹出对话框的标题，它的值在 code目录下的lang目录下的语言文件中定义，lang目录下面en.js,zh_cn.js等是语言的资源文件，采用国际化资源文件的命名方式，下 面给出zh_cn.js的内容：
fcklang.codedlgtitle就说明在语言文件中有一个键为fcklang.codedlgtitle的字符串。fckplugins.items['code'].path + 'code.html', 340, 170 ) )，这个方法主要是用来加载code目录下面的code.html网页文件（该网页的内容在下面给出），上面说到的弹出对话框，就是以窗口的方式显示code.html这个网页文件。而下面的340,170是弹出的网页的大小(这个和windows.open()这个方法类似)。// 注册名为”code”的工具栏按钮
通过fcktoolbarbutton来定义一个名为”code”的工具栏按钮，fcklang.codebtn同样为获取语言文件中的字符串。fckplugins.items['code'].path + 'code.gif' 用来加载code目录下面的”code.gif”图像文件，该图像用为工具栏按钮的位图文件。fcktoolbaritems.registeritem( 'code', ocodeitem ) 最后通过fcktoolbaritems.registeritem注册”code”按钮。(注意:上面的”code”都为plugins下面定义的”code”插件的目录名)下面是fckcustom.js文件，内容如下：// only change below here
fckconfig.skinpath = fckconfig.basepath + 'skins/silver/';
fckconfig.plugins.add( 'code', 'en,zh,zh-cn' ) ;
fckconfig.toolbarsets["plugin"] = [
['source','-','-','templates'],
['cut','copy','paste','pasteword','-','print','spellcheck'],
['undo','redo','-','find','replace','-','selectall'],
'/',
['bold','italic','underline','strikethrough','-','subscript','superscript'],
['orderedlist','unorderedlist','-','outdent','indent'],
['justifyleft','justifycenter','justifyright','justifyfull'],
['link','unlink'],
'/',
['image','table','rule','smiley'],
['fontname','fontsize'],
['textcolor','bgcolor'],
['-','code']
] ;
fckconfig.skinpath = fckconfig.basepath + 'skins/silver/'为设定fckeditor的皮肤文件，这些皮肤文件就是在fckeditor/editor/skins目录下面的皮肤文件。fckconfig.plugins.add( 'code', 'en,zh,zh-cn' ) 为加载刚才自己定义的”code”插件(注意:这里的”code”都为plugins下面定义的”code”插件的目录名)，后面的’en,zh,zh-cn’为该插件支持的语言，这里指定支持英文，简体中文和繁体中文(需要在插件目录的lang目录中编写语言文件)
可以看到，这就是一个普通的html文件，里面可以写html标签，也支持javascript的脚本语言。
说明：
var oeditor = window.parent.innerdialogloaded()通过这个方法，来获取弹出网页的父网页接着就可以这个oeditor对象来获取fckeditor的资源，包括刚才自定义的插件对象，像下面的var fckcodes = oeditor.fckcodes来获取在fckplugins.js中定义的fckcodes对象。加一个要说明的地方是<span fcklang="codedlgname">，可以通过fcklang这个标签来获取在lang目录下面的语言文件中的语言资源，以此来实现fckeditor的国际化。通过window.onload()方法中网页文件加载时调用上面创建的oeditor对象的fcklanguagemanager对象的translatepage(document)方法给页面加入国际化支持。并且指定父窗口的”ok”命令可用。在fckeditor中调用自定义插件：
这定义自己的工具栏，注意其中的[‘code’]，”code”为刚才定义的”code”工具栏命令按钮，通过fckconfig.toolbarsets将自定义的插件加入到了工具栏中。
code.html文件内容：
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>code properties</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta content="noindex, nofollow" name="robots">
<link href="stylesheets/highlight.css" media="screen" rel="stylesheet"
type="text/css" />
<script language="javascript">
var oeditor = window.parent.innerdialogloaded() ;
var fcklang = oeditor.fcklang ;
var fckcodes = oeditor.fckcodes ;
window.onload = function ()
{
oeditor.fcklanguagemanager.translatepage( document ) ;
window.parent.setokbutton( true ) ;
}
function ok()
{
var select = document.getelementbyid('code_type');
fckcodes.add(select.options[select.selectedindex].innerhtml,document.getelementbyid('code_text').value);
return true ;
}
</script>
</head>
<body scroll="no" style="overflow: hidden">
<table height="100%" width="95%" align="center">
<tr height="40">
<td><span fcklang="codedlgname"></span></td>
<td>
<select id="code_type">
<option selected="selected">java</option>
<option>ruby</option>
<option>python</option>
<option>c/c++</option>
<option>c#</option>
<option>sql</option>
<option>xml</option>
<option>css</option>
<option>javascript</option>
</select>
</td>
</td>
</tr>
<tr valign="top">
<td><span fcklang="code"></span></td>
<td><textarea id="code_text" cols="90" rows="20"></textarea></td>
</tr>
</table>
</body>
</html>
另外，语言文件zh-cn.js中内容：
解释：
如上面代码所示，首先要加载自己定义的fckeditor配置文件，就是我们刚才写的fckcustom.js文件，加外，我们在上面已经在自定义的toolbarsets ---“plugin”中加入了自定义的”code”工具栏按钮，所以我们只要在fckeditor中指定使用”plugin”这一个工具栏设置就可以了。
注意工具栏右下角的”码”工具栏按钮，就是自己定义的按钮，”码”为code.gif图片内容。