CKEditor添加自定义按钮

来源：互联网发布：sai mac汉化破解版编辑：程序博客网时间：2024/04/29 08:33

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

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

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

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

01CKEDITOR.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原来内容：

01CKEDITOR.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代码：

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

其中editor1是我的textarea的id名

5. 配置完成后效果

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

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