Buttons

该属性定义了对话框底部可用的按钮. 它是一个 CKEDITOR.dialog.buttonDefinition对象的数组. 默认的值是 [ CKEDITOR.dialog.okButton, CKEDITOR.dialog.cancelButton ]. 为了增加你自己的按钮, 你须要写下按钮的定义，并把它加到该数组里. 例如:

buttons:[{
    type:'button',
    id:'someButtonID', /* note: this is not the CSS ID attribute! */
    label: 'Button',
    onClick: function(){
       //action on clicking the button
    }
},CKEDITOR.dialog.okButton, CKEDITOR.dialog.cancelButton],

效果如下:

对话框事件

onOK, onLoad, onShow, onHide, onCancel 事件在不同的情况下会被触发. onLoad在对话框第一次打开的时候被触发, 可以用来针对该对话框做一些初始化. onShow在对话框显示的时候被触发. onLoad和onShow的不同之处在于onLoad将只触发一次，而不管对话框被打开或关掉多少次, 而同时onShow将在对话框每次显示的时候被触发. 这是因为在按下ok或cancel的时候，对话框将被隐藏(触发onHide)，而不是完全的卸载. onOk和onCancel将在ok或cancel按钮被按下的时候触发.

Resizable

该属性用来描述对话框是否可以被调整大小. 可能的值包含: CKEDITOR.DIALOG_RESIZE_NONE, CKEDITOR.DIALOG_RESIZE_WIDTH, CKEDITOR.DIALOG_RESIZE_HEIGHT and CKEDITOR.DIALOG_RESIZE_BOTH. Default is CKEDITOR.DIALOG_RESIZE_NONE

对话框的UI

对话框的用户接口是对话框属性定义的内容. 对话框的UI部分会首先被组织为几个页面, 每个页面表示了对话框的一个tab页. 在每个页面中, 输入元素(按钮，文本输入，文本区域, 单选, 下拉, 多选和文件)都将被辅助性的结构元素(vbox,hbox和label)组织起来. 通过写这些UI元素的定义, 你将不须要写任何html代码而完成对这些UI的行为和外表的定义. 当然，替代使用这些所提供的对象来构建用户界面的方法是依然选择用原始的HTML代码去实现html的UI元素。

对话框的页面

内容域是一个contentDefinition的数组, 每个定义代表了一个对话框的tab页. 下面是一个模板:

contents: [{
        id: 'page1',  /* not CSS ID attribute! */
        label: 'Page1',
        accessKey: 'P',
        elements:[ /*elements */]
    }, {
        id:'page2',
        label:'Page2',
        accessKey: 'Q',
        elements:[/*elements*/]
    }]

结果如下:

UI 元素