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 exampleCKEditor 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'
}
]
}]
}
]
};});
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?
