CKEditor添加自定义按钮

1、下载ckeditor,我这里下载的是CKEditor 3.6.2。

2、里边有压缩过的代码及源码，源码所在目录为_source，还有一些使用例子，具体不做累述

此处主要讲的是在使用过程需要添加自定义按钮。

2. 比如我要添加“插入代码”的按钮，起名为code。在ckeditor/plugins下新建文件夹code，在code文件夹里加入一个小图片如code.gif，然后在code文件夹里新建plugin.js文件，内容如下：

01 CKEDITOR.plugins.add(
02     "code",
03     {
04         requires:["dialog"],
05         lang:["en"],
06         init:function (a)
07         {
08             a.addCommand("code", new CKEDITOR.dialogCommand("code"));
09             a.ui.addButton(
10                 "Code",
11                 {
12                     label:"插入代码",
13                     command:"code",
14                     icon:this.path + "code.gif"
15                 });
16             CKEDITOR.dialog.add("code", this.path + "dialogs/code.js");
17         }
18     }
19 );

3. 修改config.js来注册code插件。用如下代码替换config.js原来内容：

01 CKEDITOR.editorConfig = function( config )
02 {
03     config.language = 'zh-cn';
04     config.extraPlugins = 'code';
05     config.height = 400;
06     config.uiColor = '#14B8C4';
07     config.skin = 'kama';
08     config.toolbar = [
09              ['Source'],
10              ['Image'],
11              ['SpecialChar'],
12              ['FontSize'],
13              ['TextColor'],
14              ['Smiley'],
15              ['Code'],
16                 ]
17 };

注意我的CKEditor配置都是通过修改config.js来完成

4. 安装CKEditor，在要引入CKEditor的页面中script标签内添加如下js代码：

1 CKEDITOR.replace('editor1', {});

其中editor1是我的textarea的id名

5. 配置完成后效果

6. 配置点击自定义按钮后弹出的对话框。在code文件夹下新建dialogs文件夹，在dialogs文件夹下新建code.js，code.js内容如下：

01 CKEDITOR.dialog.add(
02     "code",
03     function (a)
04     {
05         return {
06             title:"插入代码",
07             minWidth:590,
08             minHeight:300,
09             contents:
10             [
11                 {
12                     id:"tab1",
13                     label:"",
14                     title:"",
15                     expand:true,
16                     padding:0,
17                     elements:
18                     [
19                         {
20                             type:"html",
21                             html:""
22                         }
23                     ]
24                 }
25             ],
26             onOk: function()
27             {
28             }
29         };
30     }
31 );

由于html:""里的html代码贴出会影响页面的显示，于是我将它去掉。""里可以填入期望效果的html代码。重点关注onOk: function()，它可以定义在按确定按钮后执行的代码