最新版CKEditor的配置方法及插件(Plugin)编写示例

FCKEditor重写了JS框架，并更名为CKEditor。第一次在官方demo页面上看到它时，就被那种清爽的界面和扎实的功能吸引住了——毫不夸张地说，CKEditor称得上是目前开源领域最优秀的多媒体HTML编辑器之一。

这篇文章会详细记录整个配置过程，同时以文章分页插件为例，简单梳理一下CKEditor插件的编写思路。先从官网http://ckeditor.com/download下载最新版，解压到项目目录，准备工作就算完成了。

1. 调用CKEditor方法

在页面里加载核心JS文件：。然后像往常一样放置一个textarea，比如：

初始化HTML内容

在textarea后面加上一行JS：，这就搞定了。其他调用方式可以参考 _samples 目录下的示例。

2. 配置个性化工具栏

CKEditor默认的工具栏里有很多按钮其实用不上，或者对中文场景来说不太合适。最省事的办法就是直接修改配置文件 config.js。下面是我的配置内容：

CKEDITOR.editorConfig = function( config ) {
    // Define changes to default configuration here. For example:
    // config.language = 'fr';
    config.uiColor = '#ddd';
    config.toolbar = 'Cms';
    config.toolbar_Cms = [
        ['Source','-'],
        ['Cut','Copy','Paste','PasteText','PasteFromWord','-'],
        ['Undo','Redo','-','Find','Replace','RemoveFormat'],['Link','Unlink','Anchor'],
        ['Image','Flash','Table','HorizontalRule', '-'],['Maximize'],
        '/',
        ['Bold','Italic','Underline','Strike','-'],
        ['FontSize'],['TextColor','BGColor'],
        ['NumberedList','BulletedList','-','Outdent','Indent','pre'],
        ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
        ['PageBreak', 'Page']
    ];
    config.filebrowserUploadUrl = '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files';
    config.fontSize_sizes = '10/10px;12/12px;14/14px;16/16px;18/18px;20/20px;22/22px;24/24px;28/28px;32/32px;48/48px;';
    config.extraPlugins = 'apage';
};

3. 将编辑器内文字修改为14px

默认12px对中文显示效果不太理想，改为14px会舒服很多。需要改两个地方：

• 可视化编辑里的默认字体大小：修改根目录下的 contents.css，把 body 中的 font-size: 12px 改为 font-size: 14px。
• 源代码视图的字体大小：修改 skins\kama\editor.css，在最后加上一句：.cke_skin_kama textarea.cke_source { font-size:14px; }。

4. 插件编写流程和实例代码

下面就以一个文章分页插件为例，走一遍完整的插件开发流程。

4.1 创建插件目录和文件

在 plugins 目录下新建文件夹 apage，然后在里面新建 plugin.js，内容如下：

CKEDITOR.plugins.add( 'apage', {
    init : function( editor ) {
        // Add the link and unlink buttons.
        editor.addCommand( 'apage', new CKEDITOR.dialogCommand( 'apage' ) );
        editor.ui.addButton( 'Page', {
            //label : editor.lang.link.toolbar,
            label : "Page",
            //icon: 'images/anchor.gif',
            command : 'apage'
        } );
        //CKEDITOR.dialog.add( 'link', this.path + 'dialogs/link.js' );
        CKEDITOR.dialog.add( 'apage', function( editor ) {
            return {
                title : '文章分页',
                minWidth : 350,
                minHeight : 100,
                contents : [
                    {
                        id : 'tab1',
                        label : 'First Tab',
                        title : 'First Tab',
                        elements : [
                            {
                                id : 'pagetitle',
                                type : 'text',
                                label : '请输入下一页文章标题
(不输入默认使用当前标题+数字形式)'
                            }
                        ]
                    }
                ],
                onOk : function() {
                    editor.insertHtml("[page="+this.getValueOf( 'tab1', 'pagetitle' )+"]");
                }
            };
        } );
    },
    requires : [ 'fakeobjects' ]
} );

4.2 在工具栏中添加按钮并声明扩展插件

在工具栏中加一项 Page，并在配置中声明扩展插件 config.extraPlugins = 'apage';。有两种方法：

• 方法一：直接在 config.js 中添加（参考上面第2节的示例）。
• 方法二：在引用CKEditor的地方加配置参数，比如：

CKEDITOR.replace( 'editor1', {
    extraPlugins : 'examenLink',
    toolbar : [
        ['Undo','Redo','-','Cut','Copy','Paste'],
        ['ExamenLink','Bold','Italic','Underline',],
        ['Link','Unlink','Anchor','-','Source'],['Page']
    ]
});

此时你会看到编辑器里多了一个空白的按钮。

4.3 解决空白按钮的问题

空白按钮是因为插件没有指定图标。有两种解决办法：

• 方法1：修改插件代码，在 plugin.js 中将 icon 定义为一个存在的图标。
• 方法2：让按钮显示Label文字。在放置编辑器的页面里加CSS：

注意CSS中的 cke_button_apage 名称需要与实际保持一致。

如果你的分页只需要插入一个分页符，不需要填写标题，那更简单，直接修改插件代码即可。下面给出两种常见实现：

4.4 分页插件完整代码示例

插件1：弹出对话框，提示输入下一页标题

CKEDITOR.plugins.add( 'apage',{
    init : function( editor ){
        // Add the link and unlink buttons.
        editor.addCommand( 'apage', new CKEDITOR.dialogCommand( 'apage' ) );
        editor.ui.addButton( 'Page',{
            //label : editor.lang.link.toolbar,
            label : "Page",
            //icon: 'images/anchor.gif',
            command : 'apage'
        } );
        //CKEDITOR.dialog.add( 'link', this.path + 'dialogs/link.js' );
        CKEDITOR.dialog.add( 'apage', function( editor ){
            return {
                title : '文章分页',
                minWidth : 350,
                minHeight : 100,
                contents : [{
                    id : 'tab1',
                    label : 'First Tab',
                    title : 'First Tab',
                    elements :[{
                        id : 'pagetitle',
                        type : 'text',
                        label : '请输入下一页文章标题
(不输入默认使用当前标题+数字形式)'
                    }]
                }],
                onOk : function(){
                    editor.insertHtml("[page="+this.getValueOf( 'tab1', 'pagetitle' )+"]");
                }
            };
        } );
    },
    requires : [ 'fakeobjects' ]
} );

插件2：直接插入分页符
（注意：使用过程中需要将『page』中的『』去掉，因为编辑器默认会转码）

CKEDITOR.plugins.add( 'apage',{
    var cmd = {
        exec:function(editor){
            editor.insertHtml("[[『page』]]");
        }
    }
    init : function( editor ){
        // Add the link and unlink buttons.
        editor.addCommand( 'apage', cmd );
        editor.ui.addButton( 'Page',{
            //label : editor.lang.link.toolbar,
            label : "Page",
            //icon: 'images/anchor.gif',
            command : 'apage'
        } );
    },
    requires : [ 'fakeobjects' ]
} );