ckeditor自定义插件流程

http://free-kingdom.iteye.com/blog/631843

 

搞了一上午，最后发现原因原来出在某路径少打一个“/”，真是害人不浅。

 

本次只是熟悉一下写ckeditor插件的流程，所以用的是samples里api_dialog.js的代码作为弹出窗口。

 

首先第一步，在ckeditor/plugins目录下新建文件夹作为插件目录，我新建了一个myplugin文件夹。

 

然后在myplugin文件夹下新建两个东西，一个是plugin.js文件，另一个是dialogs文件夹。

 

plugin.js内容如下：

 

CKEDITOR.plugins.add('myplugin',
    {
        requires : ['dialog'],
        init : function (editor)
        {
            var pluginName = 'myplugin';

            //加载自定义窗口，就是dialogs前面的那个/让我纠结了很长时间
            CKEDITOR.dialog.add('myDialog',this.path + "/dialogs/mydialog.js");

            //给自定义插件注册一个调用命令
            editor.addCommand( pluginName, new CKEDITOR.dialogCommand( 'myDialog' ) );

            //注册一个按钮，来调用自定义插件
            editor.ui.addButton('MyButton',
                    {
                        //editor.lang.mine是我在zh-cn.js中定义的一个中文项，
                        //这里可以直接写英文字符，不过要想显示中文就得修改zh-cn.js
                        label : editor.lang.mine,
                        command : pluginName
                    });
        }
    }
);

 

 

然后在dialogs文件夹下新建一个mydialog.js，内容如下：

 

CKEDITOR.dialog.add( 'myDialog', function( editor )
{
    return {
        title : 'My Dialog',
        minWidth : 400,
        minHeight : 200,
        contents : [
            {
                id : 'tab1',
                label : 'First Tab',
                title : 'First Tab',
                elements :
                [
                    {
                        id : 'input1',
                        type : 'text',
                        label : 'Input 1'
                    }
                ]
            }
        ]
    };
} );

 

 然后修改config.js文件以配置我的自定义插件，config.js内容如下：

 

CKEDITOR.editorConfig = function( config )
{
    config.language = 'zh-cn';
    config.skin = 'office2003';
    config.width = 800;
    config.height = 300;
    config.removePlugins = 'elementspath';
    config.extraPlugins = 'myplugin'; //新建插件

    config.toolbar=

        [

        ['unlink','-','Save','unlink','Preview','-','Templates'],

        ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print','SpellChecker','Scayt'],

        ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],

        '/',

        ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],

        ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],

        ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],

        ['Link','Unlink','Anchor'],

        ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar',

        'PageBreak'],

        '/',

        ['Styles','Format','Font','FontSize'],

        ['TextColor','BGColor'],

        ['Maximize','ShowBlocks','-','About','-','MyButton'] //我的按钮在最后

        ];



};

 

然后就ok了。在作出修改之后最好清下ie缓存再刷新页面。