editor.ui.addButton函数声明包含了两个参数, 按钮名字和按钮定义. 在按钮定义中可能的属性还包含:

• label: 当鼠标位于按钮之上时所出现的文字提示
• className: 按钮的css类名. 默认为: ‘cke_button_’ + 命令名称
• click: 当点击按钮后所调用的函数. 默认为: 执行由 命令键值 指定的命令.
• command: 将在按钮点击之后执行的命令
  上述代码利用了CKEDTIOR.dialogCommand，该函数将在下面的对话章节中介绍. 在添加了一个按钮后，你需要把‘Footnote’增加到config.js的工具栏的定义中, 把该按钮放到工具栏的合适的位置. 之后，你就能看到一个空的按钮出现在工具栏里.

按钮图片

最简单的增加按钮图片的办法是利用属性icon. 代码如下:

CKEDITOR.plugins.add('myplugin',
{
    init: function(editor)
    {
        //plugin code goes here
        editor.ui.addButton('myplugin',
            {
                label: 'myplugin',
                command: FCKCommand_myplugin,
                icon: CKEDITOR.plugins.getPath('myplugin') + 'myplugin.png'
            });
    }
});

命令

CKEditor以命令的方式提供了大部分的功能. 命令和函数之间的不同是 命令是有“ON”, “OFF“和未启用状态的.

定义一个命令

editor.addCommand函数声明了两个参数, 命令名字和命令的对象定义. 可能的命令定义的属性包含:

• exec: 最小形式, 定义的对象拥有一个exec方法, 该方法会在命令执行时执行.
• modes: 命令能被执行的模式. 默认为: {wysiwyg:1} 有效的模式是: wysiwyg, source
• editorFocus: 在执行命令时，是否给予编辑器焦点. 默认: true
• state: 命令的状态. 默认: CKEDITOR.TRISTATE_OFF
• canUndo: 该命令是否会和redo/undo系统挂钩
• async: 在异步功能，例如ajax中被用到. 在执行完命令后, afterCommandExec事件将不会被自动触发. 它将期望程序员能够手工触发该事件.

执行命令

触发命令是很简单的, 通过
editor.execCommand(commandName);

命令状态

命令有三个状态: ON, OFF和DISABLED. 状态能够通过setState进行设置，例如:
editor.getCommand(commandName).setState(state);

状态值将会是: CKEDITOR.TRISTATE_ON, CKEDITOR.TRISTATE_OFF, CKEDITOR.TRISTATE_DISABLED 中的一个.
当设置为未启用的时候, 按钮将会表现为灰色, 并且通过execCommand执行的命令将无效. 当设置为on的时候, 按钮就会被高亮. 当命令的状态改变的时候, 命令将会触发一个’state’事件.

对话框是一些插件的核心. 为了使用该对话框, 他们必须首先在plugin.js中注册, 包括定义, 通过调用CKEDITOR.dialog.add如下:
CKEDITOR.dialog.add(pluginName, this.path + 'dialogs/pluginName.js');

之后，如果你想通过点击一个按钮触发这个对话框, 你可以通过使用CKEDITOR.dialogCommand来简单的完成这项工作.
editor.addCommand(pluginName, new CKEDITOR.dialogCommand(pluginName));

对话框定义

按约定，有关对话框的代码将会被放到dialogs/.js中. 和按钮和命令类似, 对话框也是通过定义一些属性和方法来定义的. 下面的代码展示了一个标准的.js的模板:

( function(){
 
  var exampleDialog = function(editor){
    return {
      title : /* title in string*/,
      minWidth : /*number of pixels*/,
      minHeight : /*number of pixels*/,
      buttons: /*array of button definitions*/,
      onOk: /*function*/ ,
      onLoad: /*function*/,
      onShow: /*function*/,
      onHide: /*function*/,
      onCancel: /*function*/,
      resizable: /* none,width,height or both  */,
      contents: /*content definition, basically the UI of the dialog*/
    }
  }
 
  CKEDITOR.dialog.add('insertHTML', function(editor) {
    return exampleDialog(editor);
  });
 
})();

定义里有以下一些属性／方法: