扩展CKEditor按钮

最近忙于开发工作流，想起之前开发的OA ，缺少一个重要的功能：表单设计器。因为我们的OA是基于Sharepoint开发的，如果没有表单设计器，定义一个列表的界面需要开发一个feature，或则需要VS开发一个aspx页面。这事一个很麻烦的事情。所以考虑实现一个表单设计器。
于是我到网上找HTML 编辑器，找到好几个，分别有CKEditor,TinyMCE,还有一个基于JQuery的一个编辑器XHEditor。这几个编辑器我就不做比较了。我这里选择使用CKEditor。既然要做表单设计器，我们的需要扩展这HTML编辑器，CKEditor提供了方便可扩展的插件体系，我们可以很方便的自定义一些自己的插件。这只介绍概述CKEditor插件开发。
首先我们到http://ckeditor.com/download下载CKEditor,这里我使用的是CKEditor 3.6。解压后目录如下：

Dir

CKEditor的源码存放在_source目录下面，根目录下面的ckeditor.js是经过压缩的代码。Dom元素操作，事件处理，初始化脚本和其他一些环境设置都在ckeditor\_souce\core目录下面。其他功能，如格式化，复制粘贴，图片和链接都是以插件的形式实现的，存放在ckeditor\_source\plugins文件夹下面，每一个文件夹为一个插件。每个文件夹下面都有一个plugin.js的脚本文件。

为了减少HTML 请求数量，CKEditor压缩并打包成ckeditor.js 和ckeditor_basic.js。默认运行压缩后的ckeditor。在开发过程中，如果你想运行未压缩的源码，则把ckeditor.js替换成ckeditor_source.js就可以了。

我们以Hello World插件为例子。呵呵。在plugins目录下面新建一个HelloWorld文件夹，并在下面建立一个plugin.js文件。

插件配置

要CKEditor能够调用我们开发的插件，我们需要在CKEditor注册我们开发的插件。打开根目录下面的config.js。设置CKEDITOR.editorConfig属性

config.extraPlugins = 'HelloWorld';

完整的代码如下：

CKEDITOR.editorConfig = function( config )

    // Define changes to default configuration here. For example:

    // config.language = 'fr';

    // config.uiColor = '#AADC6E';

    config.extraPlugins = 'HelloWorld';

};

这样CKEditor会从Plugin文件夹找HelloWorld文件夹下面的plugin.js，并加载插件。

工具栏按钮

我们需要在CKEditor的工具栏上加入HelloWorld的按钮。单击按钮出发一个命令。命令可以触发一个事件，或调用方法。我们通过CKEDITOR.plugins.add方法来添加插件。

CKEDITOR.plugins.add('HelloWorld', {

    init: function (editor) {

        var pluginName = 'HelloWorld';

        CKEDITOR.dialog.add(pluginName, this.path + 'dialogs/HelloWorld.js');

        editor.addCommand(pluginName, new CKEDITOR.dialogCommand(pluginName));

        editor.ui.addButton(pluginName,

            label: 'Hello',

            command: pluginName

});

});

上面代码中，我们添加了一个HelloWorld的按钮，和HelloWorld的命令。
通过方法editor.ui.addButton添加一个按钮，这个方法有两个参数。一个是按钮的名字，另外一个是按钮的定义。
定义有以下几个属性：
label:当鼠标移动到按钮上面是提示此文本信息。
className:样式名，默认是'cke_button_' + command
click：按钮的单击事件出发的方法。如果没有实现单击事件，则执行指定key的命令。
command：按钮单击默认执行的命令。
下面是按钮的部分源码。

CKEDITOR.ui.button = function( definition )

      // Copy all definition properties to this object.

      CKEDITOR.tools.extend( this, definition,

          // Set defaults.

              title        : definition.label,

              className    : definition.className || ( definition.command && 'cke_button_' + definition.command ) || '',

              click        : definition.click || function( editor )

                      editor.execCommand( definition.command );

});

      this._ = {};

};

editor表示一个编辑器的实例。通过调用其addCommand(commandName, commandDefinition) 方法，来添加命令。我们实例化了一个CKEDITOR.dialogCommand，此命令继承至CKEDITOR.commandDefinition，该命令执行时打开一个特定的对话框。我们现在把这个按钮加入到ToolBar里，修改Config.js。

CKEDITOR.editorConfig = function (config) {

    // Define changes to default configuration here. For example:

    // config.language = 'fr';

    // config.uiColor = '#AADC6E';

    config.toolbar =

                    { name: 'document', items: ['Source', '-', 'Save', 'NewPage', 'DocProps', 'Preview', 'Print', '-', 'Templates'] },

                    { name: 'clipboard', items: ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo'] },

                    { name: 'editing', items: ['Find', 'Replace', '-', 'SelectAll', '-', 'SpellChecker', 'Scayt'] },

                    { name: 'forms', items: ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'] },

                    '/',

                    { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat'] },

                    { name: 'paragraph', items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl'] },

                    { name: 'links', items: ['Link', 'Unlink', 'Anchor'] },

                    { name: 'insert', items: ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe'] },

                    '/',

                    { name: 'styles', items: ['Styles', 'Format', 'Font', 'FontSize'] },

                    { name: 'colors', items: ['TextColor', 'BGColor'] },

                    { name: 'tools', items: ['Maximize', 'ShowBlocks', '-', 'About'] },

                    '/',

                    { name: 'extent', items: ['HelloWorld'] }

];

    config.extraPlugins += (config.extraPlugins ? ',HelloWorld' : 'HelloWorld');

};

注释：’/’表示换行,’-‘标识分隔符。

config.toolbar的默认值是Full。Full的菜单有哪些呢？打开ckeditor\_source\plugins\toolbar\plugin.js查看toolbar_Full的定义。

CKEDITOR.config.toolbar_Full =

    { name: 'document',        items : [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ] },

    { name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },

    { name: 'editing',        items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] },

    { name: 'forms', items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },

    '/',

    { name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },

    { name: 'paragraph',    items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },

    { name: 'links',        items : [ 'Link','Unlink','Anchor' ] },

    { name: 'insert',        items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ] },

    '/',

    { name: 'styles',        items : [ 'Styles','Format','Font','FontSize' ] },

    { name: 'colors',        items : [ 'TextColor','BGColor' ] },

    { name: 'tools',        items : [ 'Maximize', 'ShowBlocks','-','About' ] }

];

那么我们可以模仿来定义Mine的ToolBar。再次编辑config.js。

CKEDITOR.editorConfig = function (config) {

    // Define changes to default configuration here. For example:

    // config.language = 'fr';

    // config.uiColor = '#AADC6E';

    config.toolbar_Mine =

                    { name: 'document', items: ['Source', '-', 'Save', 'NewPage', 'DocProps', 'Preview', 'Print', '-', 'Templates'] },

                    { name: 'clipboard', items: ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo'] },

                    { name: 'editing', items: ['Find', 'Replace', '-', 'SelectAll', '-', 'SpellChecker', 'Scayt'] },

                    { name: 'forms', items: ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'] },

                    '/',

                    { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat'] },

                    { name: 'paragraph', items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl'] },

                    { name: 'links', items: ['Link', 'Unlink', 'Anchor'] },

                    { name: 'insert', items: ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe'] },

                    '/',

                    { name: 'styles', items: ['Styles', 'Format', 'Font', 'FontSize'] },

                    { name: 'colors', items: ['TextColor', 'BGColor'] },

                    { name: 'tools', items: ['Maximize', 'ShowBlocks', '-', 'About'] },

                    '/',

                    { name: 'extent', items: ['HelloWorld'] }

];

    config.toolbar = 'Mine';

    config.extraPlugins += (config.extraPlugins ? ',HelloWorld' : 'HelloWorld');

};

我们运行下，查看下效果。
firstshow
这个按钮已经出来了。可惜没有图片。在HelloWorld的插件目录下面新增一文件夹images，添加一个16*16的图标。
修改ckeditor\_source\plugins\HelloWorld\plugin.js。

CKEDITOR.plugins.add('HelloWorld', {

    init: function (editor) {

        var pluginName = 'HelloWorld';

        CKEDITOR.dialog.add(pluginName, this.path + 'dialogs/HelloWorld.js');

        editor.addCommand(pluginName, new CKEDITOR.dialogCommand(pluginName));

        editor.ui.addButton(pluginName,

            label: 'Hello',

            command: pluginName,

            icon: this.path + 'images/hello.png'

});

});

Dialogs:

Dialog是开发插件的关键，在前面我们使用CKEDITOR.dialog.add方法添加了一个对话框。有两个参数。一个是对话框名，一个对话框定义。
然后我们还添加了一个dialog命令。这个命令会打开我们的dialog。

editor.addCommand(pluginName, new CKEDITOR.dialogCommand(pluginName));

我们的对话框定义放在ckeditor\_source\plugins\HelloWorld\dialogs\HelloWorld.js。

(function () {

    function HelloWorldDialog(editor) {

        return {

            title: '对谁说Hello',

            minWidth: 300,

            minHeight: 80,

            buttons: [{

                type: 'button',

                id: 'someButtonID',

                label: 'Button',

                onClick: function () {

                    alert('Custom Button');

},

            CKEDITOR.dialog.okButton,

            CKEDITOR.dialog.cancelButton],

            contents:

                    id: 'info',

                    label: '名字',

                    title: '名字',

                    elements:

                            id: 'text',

                            type: 'text',

                            style: 'width: 50%;',

                            label: '名字',

                            'default': '',

                            required: true,

                            validate: CKEDITOR.dialog.validate.notEmpty('名字不能为空'),

                            commit: function () {

                                var text = ‘Hello ’+this.getValue();

                                alert(text);

],

            onLoad: function () {

                alert('onLoad');

},

            onShow: function () {

                alert('onShow');

},

            onHide: function () {

                alert('onHide');

},

            onOk: function () {

                this.commitContent();

},

            onCancel: function () {

                alert('onCancel');

},

            resizable: CKEDITOR.DIALOG_RESIZE_HEIGHT

};

    CKEDITOR.dialog.add('HelloWorld', function (editor) {

        return HelloWorldDialog(editor);

});

})();

详细的Dialog定义，可以查看 http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.definition.html。这里介绍几个属性：
title:窗体的标题

minWidth:窗体最小的宽度

minHeight:窗体的最小高度

buttons:显示在窗体的按钮。默认CKEDITOR.dialog.okButton,CKEDITOR.dialog.cancelButton。也就是确定，和取消按钮。也可以自己定义一个Button。

    type: 'button',

    id: 'someButtonID',

    label: 'Button',

    onClick: function () {

        alert('Custom Button');

这里创建了 CKEDITOR.dialog.definition.button对象。

contents:对话框里面的内容。是一个 CKEDITOR.dialog.definition.content数组。每一个CKEDITOR.dialog.definition.content显示为一个tab(选项卡)。这里有一个重要的属性是elements，是一个 CKEDITOR.dialog.definition.uiElement数组，是每一个选项卡里面的内容。uiElement中有commit方法，这个方法由对话框CKEDITOR.dialog.definition.commitContent方法调用执行。

commit: function () {

    var text = ‘Hello ’+this.getValue();

    alert(text);

这里我们调用CKEDITOR.ui.dialog.uiElement的getValue方法来获取到名字文本框的值。这里只是alert，稍后在改进怎么把值加入到设计器里面。
还有一个是setup方法，则由CKEDITOR.dialog.definition.setupContent方法调用执行。
type:有以下几个值。text, password, textarea, checkbox, button, select, file, fileButton, html
labelLayout:'horizontal' 或则'vertical'。
on*: 定义事件方法。事件可以是Dom事件，例如onChange,onClick,也可以是onShow,onHide,onLoad。
validate:验证用户的输入。例如：验证值不能为空。validate : CKEDITOR.dialog.validate.notEmpty(ErrorMessage)。当单击btnOk按钮，如果值为空，则会弹出ErrorMessage信息来提示。你还可以用其他的验证方法来验证输入：

regex(regex, msg)
notEmpty(msg)
integer(msg) //regex: /^\d*$/
number(msg) //regex: /^\d*(?:\.\d+)?$/
equals(value, msg)

notEqual(value, msg)

onLoad,onShow,onHide,onOk,onCancel这几个方法看字面意思就知道干嘛的了。就不多介绍了。我们这里当onOk，就是确定按钮单击的时候，执行了commitContent方法，从而执行了CKEDITOR.dialog.definition.uiElement.commit方法。

resizable:一个枚举。用于修改窗体的大小，是否可以修改高度，宽度，还是两者都可以。有以下几个定义。默认值是CKEDITOR.DIALOG_RESIZE_NONE。
CKEDITOR.DIALOG_RESIZE_NONE
CKEDITOR.DIALOG_RESIZE_WIDTH
CKEDITOR.DIALOG_RESIZE_HEIGHT
CKEDITOR.DIALOG_RESIZE_BOTH

那现在在来运行看看效果：
dialog
单击确定按钮则弹出Hello 某某某。

当然我们不想这样Alert。我们希望能够把Hello 某某某写到编辑器里面。
这里我们用到了CKEDITOR.dom.element对象。这对象里面包含了很多对编辑器DOM操作的方法。如我们要创建一个span元素。var element = new CKEDITOR.dom.element('span', editor.document);。我们需要设置值则调用setText方法等。
那我们修改刚刚做好的dialot。

(function () {

    function HelloWorldDialog(editor) {

        return {

            title: '对谁说Hello',

            minWidth: 300,

            minHeight: 80,

            buttons: [

            CKEDITOR.dialog.okButton,

            CKEDITOR.dialog.cancelButton],

            contents:

                    id: 'info',

                    label: '名字',

                    title: '名字',

                    elements:

                            id: 'text',

                            type: 'text',

                            style: 'width: 50%;',

                            label: '名字',

                            'default': '',

                            required: true,

                            validate: CKEDITOR.dialog.validate.notEmpty('名字不能为空'),

                            commit: function (editor) {

                                var text = 'Hello '+this.getValue();

                                var element = new CKEDITOR.dom.element('span', editor.document);

                                element.setText(text);

                                editor.insertElement(element);

],

            onOk: function () {

                this.commitContent(editor);

},

            resizable: CKEDITOR.DIALOG_RESIZE_HEIGHT

};

    CKEDITOR.dialog.add('HelloWorld', function (editor) {

        return HelloWorldDialog(editor);

});

})();

在单击OK按钮后，我们调用commit方法。我们传了一个当前编辑器的实例过去。
首先我们实例化了一个CKEDITOR.dom.elemtn。设置了它的Text，并通过insertElement方法把元素加入到编辑器。就这样。我们在看看效果。
HelloWorld

insertElement
源码：
Source
就到这里。最近考虑实现编辑器。希望大家能够给点路子。不然我会误入歧途的。。。。谢谢了。
title="Preview" src="http://cid-68f492fd20ed58d7.office.live.com/embedicon.aspx/.Public/CKEditor/HelloWorld.rar" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="padding: 0px; width: 98px; height: 115px; background-color: rgb(252, 252, 252);">

参考资料：
http://docs.cksource.com/ckeditor_api/index.html
http://www.cnblogs.com/moozi/archive/2010/01/06/1640034.html
http://www.cnblogs.com/xiangyan168/archive/2011/05/19/2050991.html
http://ajithmanmadhan.wordpress.com/2009/12/16/customizing-ckeditor-and-adding-a-new-toolbar-button/