CKEditor custom select menu

Question

I am trying to add my own custom select menu to the new CKEditor. The API is a little confusing so I am unsure how to get this working. I am using the ui dialog function, but really not sure how to get it working.

So far I have:

CKEDITOR.ui.dialog.select(dialogObj, elementDefinition, htmlList);

Anyone hav ideas on how to actually get a custom select to work?

I am trying understand this API: http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.ui.dialog.select.html

Answer 1

Try this Code,

It's something like creating the element dynamically just like in javascript, the SELECT control will be created whenever you are pressing Enter key...

var editor1 = CKEDITOR.replace('editor');
CKEDITOR.instances["editor"].on("instanceReady" , function(){
    var e = this.document;
    this.document.on("keyup", function(event){
        domEvent = event.data;
        key = domEvent.getKey();
        switch(key){
        case 13:
            e = CKEDITOR.instances.editor.document; 
            b = e.getBody();
            s = e.createElement('select');
            o = e.createElement('option');
            o.appendHtml("hi");
            s.append(o);

            o = e.createElement('option');
            o.appendHtml("hello");
            s.append(o);

            b.append(s);
            s.focus();
            break;
        default:
        }
    });
}); 

Answer 2

Why don't you check the _source folder?

Go into the plugins directory and pick a plugin which shows dropdown selects e.g. stylescombo. The code may shed some light into it. Create a copy of the folder and start modifying the code top down and you'll have your select in no time.

Cheers, m^e