在定义了tab页面之后, 你可以通过传递一个uiElements的数组作为contentDefinition的元素来定义每个tab页的UI. 那里右两种类型的uiElements, 结构型的和输入型的. 结构型元素(vbox和hbox)使用表格来放置元素的位置. 结构型的元素可以镶嵌从而形成复杂的结构. 当输入的uiElements拥有一些比较重要的特征的时候这会使得他们比DOM输入元素更有用.

结构型元素

elements:[{
                    type : 'hbox',
                    widths : [ '100px', '100px', '100px' ],
                    children :
                    [{
                        type:'html',
                        html:'<div>Cell1',
                    },{
                        type:'html',
                        html:'

', },{ type: 'vbox', children:[{ type:'html', html:'

', },{ type:'html', html:'

' }] }]

输入型元素

输入型元素有很多的属性和方法可用. 更多的细节请参考uiElement文档, 同时这里也有一些比较重要的:

• id:(必须的) 注意这不是css的id属性, 但是是被CKEditor所使用的标识符. CKEditor将会自动设置css id属性但和这个id无关. 为了得到此对象所表示的元素, 你可以使用getContentElement. 例如, 如果你想得到uiElement内部的某个uiElement, 你可以使用:

this.getDialog().getContentElement(pageIdName,elementIdName)  //pageIdName is the ID for page containing the element

• type:(必须的) 是以下的其中一个: text, password, textarea, checkbox, button, select, file, fileButton, html
• label: 和输入元素同时显示的文本标签
• labelLayout: ‘horizontal’横向 或 ‘vertical’ 纵向. 当设置为纵向的时候，标签会在元素的顶部.
• on* events: 函数或事件. 第一个字符必须大写. 事件可以是DOM事件，例如onChange, onClick等，就像onShow, onHide 和onLoad, 这些在对话框被激活的时候调用的事件一样.
• validate: 函数用来验证输入元素的值. 例如为了验证值不为空, 你可以使用:

validate : CKEDITOR.dialog.validate.notEmpty(ErrorMessage)

如果域是空的，那么错误消息将在你点击ok按钮的时候弹出.
内置的验证器包含:

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

• setup: 函数会在父对话框的setupContent方法被调用时执行. 能够被用来初始化一些域的值. 例如当编辑一个文档中已存图片域的时候, 你可能希望初始化该图片的宽度. 这里有个例子:

onShow : function(){ //onShow function for the dialog definition
    //... other code ...
    var elem= this.getParentEditor().getSelection().getSelectedElement(); //get the current selected element
    this.setupContent(elem);  //this function will call all the setup function for all uiElements
    //... other code...
},
contents: [{
    id: 'InfoTab',
    label: 'Info Tab',
    elements:[
    {  //input element for the width
        type: 'text',
        id: 'widthInput',
        label: 'Width',
        labelLayout: 'horizontal',
        setup: function(element){
            this.setValue(element.getAttribute('width'));
        }
    }]
}]

• commit: 函数在父对话框的commitContent方法被调用的时候执行. 例如, 它能在ok按钮被按下时变更图片的大小.

上下文菜单是你在CKEditor中右键所弹出的菜单. 就像CKEditor的其它特征一样，它也很容易被定制. 下面的代码展示了如何增加一个“Code“菜单项的过程:

if(editor.addMenuItems)
{
    editor.addMenuItems(  //have to add menu item first
        {
            insertCode:  //name of the menu item
            {
                label: 'Code',  
                command: 'insertCode',
                group: 'insertCode'  //have to be added in config
            }
        });
}
if(editor.contextMenu)
{
    editor.contextMenu.addListener(function(element, selection)  //function to be run when context menu is displayed
        {
            if(! element || !element.is('pre'))
                    return null;
            return { insertCode: CKEDITOR.TRISTATE_OFF };
        });
    }

前述代码在上下文菜单中增加了额外的insertCode元素. 当右击在非‘pre’元素上时, insertCode菜单将不会显示. 当右击在‘pre’元素上时insertCode菜单将会显示OFF状态.
除了上面的代码， 你依然需要把insertCode组放到config中，这样才能排列菜单显示的顺序. 以下是需要在config.js中增加的代码:
config.menu_groups = 'clipboard, form, tablecell, tablecellproperties, tablerow, tablecolumn, table, anchor, link, image, flash, checkbox, radio, textfield, hiddenfield, imagebutton, button,select, textarea, insertCode';

你会看到insertCode插入在了menu_groups配置的最后面. 最终的结果是:

写完所有的代码之后, 就须要把你的代码产品化. 就像前面提到的那样, 原始的代码包含了很多文件，都会被压缩成一些个文件从而降低HTTP请求. 有必要把你的代码和这些文件合并。
打包这些文件实际上是由ckeditor.pack控制的. 把你的源代码文件放到‘ckeditor.js’的列表中, 将会把你的文件添加进去.
而事实上的打包，你须要额外的两个文件ckpackager.exe或ckpackager.jar. 在你下载完这两个文件后，在你的ckeditor根下运行下面的命令:
ckpackager.exe ckeditor.pack
现在你的源码文件将会自动被打包并拷贝到ckeditor的根目录下. 可以开始享用你的插件了!