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()，它可以定义在按确定按钮后执行的代码