您的位置：首页 > 其它

CKEditor添加自定义按钮

2012-03-13 09:34 337 查看
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()，它可以定义在按确定按钮后执行的代码
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航