CKEditor是一个非常优秀的在线编辑器，它的前身就是FCKEditor，CKEditor据官方说是重写了内核的，但功能和性能比FCKEditor更为强大和优越。记得07年的时候第一次接触FCKEditor，那时候花了一天时间研究如何在它基础上增加一个自定义插件，可以参考这里http://j2ee.blog.sohu.com/36813753.html，但过程比较复杂和麻烦。其实CKEditor提供了非常方便的可扩展的插件体系，用户通过它的扩展插件体系就可以非常方便的增加自定义插件，我这里简单的给出一个完整的插件示范。
先到http://ckeditor.com/这里下载最新版本的CKEditor，我下载的是3.3.1版，大概有2M左右，包含了全部源码和测试用例。下载完毕后，解压到硬盘，假设CKEditor解压后的目录是${ckeditor}，下面提到的都是用这个进行替代。下面就开始一步步制作属于我们自己的插件了。
一、创建插件目录结构
1、进入到${ckeditor}\plugins目录下，创建目录helloworld，这个目录名称就是我们的插件名称
2、在helloworld目录下分别建立三个目录：dialogs、images、lang
二、编写插件文件
plugin.js的插件文件存在于插件目录的根目录下，一般使用CKEditor提供的API来进行插件的动态增加。首先，我们在helloworld目录下建立plugin.js文件，使用utf-8存储，该文件的内容如下：
1. /**
2. * Title:CKEditor插件示范
3. * Author:铁木箱子(http://www.mzone.cc)
4. * Date:2010-08-02
5. */
6. plugins.
add
(
'helloworld'
,
{
7. :
[
'zh-cn'
,
'en'
]
,
8. :
[
'dialog'
]
,
9. :
function
(a
)
{
10. var b
= a.
addCommand
(
'helloworld'
,
new CKEDITOR.
dialogCommand
(
'helloworld'
)
)
;
11. ui.
addButton
(
'helloworld'
,
{
12. : a.
lang.
tbTip
,
13. :
'helloworld'
,
14. :
this.
path
+
'images/hello.png'
15. }
)
;
16. dialog.
add
(
'helloworld'
,
this.
path
+
'dialogs/helloworld.js'
)
;
17. }
18. }
)
;
三、插件的对话框
requires: ['dialog']，表示当点击工具栏上的插件图标时会调用一个对话框来进行处理。我们先在helloworld\dialogs目录下建立一个helloworld.js文件，使用utf-8保存，内容如下：
1. /**
2. * Title:CKEditor在线编辑器的代码插入插件
3. * Author:铁木箱子(http://www.mzone.cc)
4. * Date:2010-07-21
5. */
6. dialog.
add
(
'helloworld'
,
function
(editor
)
{
7. var _escape
=
function
(value
)
{
8. return value
;
9. }
;
10. return
{
11. : editor.
lang.
dlgTitle
,
12. : CKEDITOR.
DIALOG_RESIZE_BOTH
,
13. :
360
,
14. :
150
,
15. :
[
{
16. :
'cb'
,
17. name
:
'cb'
,
18. :
'cb'
,
19. :
'cb'
,
20. :
[
{
21. :
'textarea'
,
22. :
true
,
23. : editor.
lang.
mytxt
,
24. :
'width:350px;height:100px'
,
25. :
6
,
26. :
'mytxt'
,
27. 'default'
:
'Hello World'
28. }
]
29. }
]
,
30. :
function
(
)
{
31. var mytxt
=
this.
getValueOf
(
'cb'
,
'mytxt'
)
;
32. insertHtml
(mytxt
)
;
33. }
,
34. onLoad
:
function
(
)
{
35. }
36. }
;
37. }
)
;
四、插件的语言文件支持
helloworld\lang目录，在这个目录下建立en.js和zh-cn.js两个文件，分别用来支持中文和英文，内容分别如下：
1. /**
2. * 支持英文的语言包(文件名称en.js)，第一个参数是插件名称
3. */
4. plugins.
setLang
(
'helloworld'
,
'en'
,
{
5. :
'Hello World Plugin Demo'
,
6. :
'Text'
,
7. :
'Hello World Plugin Demo(Powered By mzone.cc)'
8. }
)
;
9.
10. /**
11. * 支持英文的语言包(文件名称zh-cn.js)，第一个参数是插件名称
12. */
13. plugins.
setLang
(
'helloworld'
,
'zh-cn'
,
{
14. :
'Hello World插件示范'
,
15. :
'文本'
,
16. :
'Hello World 插件示范(Powered By mzone.cc)'
17. }
)
;
editor.lang.propName，其中editor是当前的编辑器实体变量，插件一般都会传递的，propName是我们在语言文件中定义的属性名称，比如这里的tbTip等。
五、插件的图片指定
icon: this.path + ‘images/hello.png’。这里的icon指的就是在编辑器工具栏上显示的图标，我们这里找一个16×16大小的png图片，命名为hello.png，然后放到helloworld\images目录下即可。
六、演示验证插件
完成上面5个步骤后，插件基本上就已经完成了。为了能够使插件可以出现在编辑器的工具栏中，我们还需要做如下配置：
1、打开${ckeditor}\config.js文件，修改内容为如下：
1. editorConfig
=
function
( config
)
2. {
3. // Define changes to default configuration here. For example:
4. // config.language = 'fr';
5. // config.uiColor = '#AADC6E';
6.
7. language
=
'zh-cn'
;
8.
9. toolbar_MyBasic
=
[
10. [
'Bold'
,
'Italic'
,
'-'
,
'NumberedList'
,
'BulletedList'
]
,
11. [
'-'
,
'Link'
,
'Unlink'
,
'Image'
,
'helloworld'
]
12. ]
;
13.
14. extraPlugins
+=
(config.
extraPlugins
?
',helloworld'
:
'helloworld'
)
;
15. }
;
config.extraPlugins这行是关键，表明这个是我们编写的额外插件，需要集成到CKEditor中去。这个仅仅是注册而已，如果需要显示在工具栏中，还要定义一个toolbar，比如我们这里定义了一个MyBasic的toolbar，并且只选取了CKEditor中最常用的几个工具，然后最后我们增加了helloworld的插件，这样我们就把刚才编写的插件注册到MyBasic的toolbar中了。
2、写一个demo.html文件进行测试
我们在${ckeditor}根目录下建立一个demo.html文件来测试下我们刚写的插件是否有效，内容如下：
1. <html>
2. <head>
3. <title>CKEditor插件编写示例-Powered By mzone.cc
</title>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5. <script type="text/javascript" src="ckeditor.js"></script>
6. </head>
7. <body>
8. <textarea cols="80" id="editor1" name="editor1" rows="10">This is the content!
</textarea>
9. <script>
10. CKEDITOR.replace("editor1", {
11. toolbar : 'MyBasic',
12. height : 300,
13. width : 800
14. });
15. </script>
16. </body>
17. </html>
然后在浏览器中打开demo.html文件，就可以看到在编辑器的工具栏中最后一个就是我们刚写的插件了，如下图所示：
