It should be pretty straight-forward, copy the relevant pieces of code from the page you linked to into your existing TinyMCE plugin, update a few strings… done!..
Start with this for your TinyMCE plugin JS and see how you get on..
// JavaScript Document
(function() {
// Creates a new plugin class and a custom listbox
tinymce.create('tinymce.plugins.onehalf', {
createControl: function(n, cm) {
switch (n) {
case 'onehalf':
var mlb = cm.createListBox('onehalf', {
title : 'My list box',
onselect : function(v) {
tinyMCE.activeEditor.windowManager.alert('Value selected:' + v);
}
});
// Add some values to the list box
mlb.add('Some item 1', 'val1');
mlb.add('some item 2', 'val2');
mlb.add('some item 3', 'val3');
// Return the new listbox instance
return mlb;
/*
case 'onehalf':
var c = cm.createSplitButton('onehalf', {
title : 'My split button',
image : 'img/example.gif',
onclick : function() {
tinyMCE.activeEditor.windowManager.alert('Button was clicked.');
}
});
c.onRenderMenu.add(function(c, m) {
m.add({title : 'Some title', 'class' : 'mceMenuItemTitle'}).setDisabled(1);
m.add({title : 'Some item 1', onclick : function() {
tinyMCE.activeEditor.windowManager.alert('Some item 1 was clicked.');
}});
m.add({title : 'Some item 2', onclick : function() {
tinyMCE.activeEditor.windowManager.alert('Some item 2 was clicked.');
}});
});
// Return the new splitbutton instance
return c;
*/
}
return null;
}
});
tinymce.PluginManager.add('onehalf', tinymce.plugins.onehalf);
})();
If something doesn’t work please report back with as much info as possible, ie. what you tried, what the result was, what did happen, what didn’t … etc..