Adding a button to the CKEditor


See the CKeditor insertlink plugin (public_html/include/ckeditor/plugins) for a working example. Grabbing the option label in a select dropdown took a while to to work out but the following will help decypher how its done.

Useful links

Comprehensive example
CKEditor Dialog Definition
Examples for the FCK and CK Editors

CKEDITOR.dialog.add("insertlink",function(e){   
    return{
        title:e.lang.insertlink.title,
        resizable : CKEDITOR.DIALOG_RESIZE_BOTH,
        minWidth:380,
        minHeight:220,
        onShow:function(){
        },
        onLoad:function(){
                dialog = this;
                this.setupContent();
        },
        onOk:function(){
            var sInsert=this.getValueOf('info','select_insert');
            //This is the line that pulls the option lable (rather than text)
            var sInsertName=this.getContentElement('info','select_insert').items[this.getContentElement('info','select_insert').getInputElement().$.selectedIndex][0];
            if ( sInsert.length > 0 )
            e.insertHtml('<a href="'+sInsert+'">'+sInsertName+'</a>');
        },
        contents:[
            {   id:"info",
                name:'info',
                label:e.lang.insertlink.commonTab,
                elements:[{
                 type:'vbox',
                 padding:0,
                 children:[
                  {type:'html',
                  html:'<span>'+e.lang.insertlink.HelpInfo+'</span>'
                  },
                  {type:'select',
                    id:'select_insert',
                    items: [
                            [INSERTLINKS]
                    ],
                    title: 'Select link to insert and press Ok'
                  }
                  ]
                }]
            }
        ]
    };});







Programmer Notes | Return to What's up?