Creating a select tag with size>1 CKEDITOR Plugin - ckeditor

Question

My CKEDITOR plugin needs to create <select size="15"><option ...></select>, but the size attribute is not directly supported by the creation mechanism. I have tried various ways of adding the size attribute after creation, but so far no joy. Here is what I have; the select is created but it does not get the size attribute.
CKEDITOR.dialog.add('macrosDialog', function(editor) {
return {
// Basic properties of the dialog window: title, minimum size.
title: 'Cadenza Macros',
resizable: CKEDITOR.DIALOG_RESIZE_BOTH,
minWidth: 400,
minHeight: 200,
// Dialog window contents definition.
contents: [
{
// Definition of the Basic Settings dialog tab (page).
id: 'tab-basic',
label: 'Basic Settings',
// The tab contents.
elements: [
{
type: 'select',
id: 'groups',
name: 'groups',
label: 'Groups',
style: "height: 300",
items: [ [ 'Core Scala' ], [ 'Create Courses with Micronautics Cadenza' ], [ 'Java / Scala Interoperability' ], [ 'Play Framework' ] ],
'default': 'Play Framework'
},
{
// Text input field for the macro title (explanation).
type: 'text',
id: 'macroComment',
label: 'Comment',
validate: CKEDITOR.dialog.validate.notEmpty("Explanation field cannot be empty")
}
]
}
],
onLoad: function(e) {
var groups = editor.document.getElement("groups");
groups.setAttribute("size", 15);
//$("#groups").setAttr("size", 15);
},
onChange: function(e) {
alert('Group: ' + this.getValue());
},
// This method is invoked once a user clicks the OK button, confirming the dialog.
onOk: function() {
// The context of this function is the dialog object itself.
// http://docs.ckeditor.com/#!/api/CKEDITOR.dialog
var dialog = this;
// Creates a new <abbr> element.
var abbr = editor.document.createElement('abbr');
// Set element attribute and text, by getting the defined field values.
abbr.setAttribute('title', dialog.getValueOf('tab-basic', 'title'));
abbr.setText(dialog.getValueOf('tab-basic', 'abbr'));
// Finally, inserts the element at the editor caret position.
editor.insertElement(abbr);
}
};
});

Answer 1

I used the html element to insert whatever I wanted:
contents: [
{
id: 'macrosDialog',
label: 'Basic Settings',
// The tab contents.
elements: [
{
type: 'hbox',
id: 'lists',
//style: "vertical-align: top",
widths: [ '25%', '25%', '25%', '25%' ],
children: [
{
type: 'html',
id: 'groups',
name: 'groups',
html: '<select size="15"></select>'
},{
type: 'html',
id: 'courses',
name: 'courses',
html: '<select size="15"></select>'
},{
type: 'html',
id: 'sections',
name: 'sections',
html: '<select size="15"></select>'
},{
type: 'html',
id: 'lectures',
name: 'lectures',
html: '<select size="15"></select>'
},
],
onLoad: function(data) {
var dialog = this.getDialog();
var groups = dialog.getContentElement('macrosDialog', 'lists', 'groups');
console.log(groups);
var courses = dialog.getContentElement('macrosDialog', 'lists', 'courses');
console.log(courses);
var sections = dialog.getContentElement('macrosDialog', 'lists', 'sections');
console.log(sections);
var lectures = dialog.getContentElement('macrosDialog', 'lists', 'lectures');
console.log(lectures);
}
}
]
}
]