TinyMCE : Create a Custom Color Split Button

Question

I am trying to create a custome color dropdown/split button in TinyMCE. The API seems capable of this but I have not had success in my tests. I am trying to use the createColorSplitButton method. Here is my code :

<script type="text/javascript">

tinyMCE.init({ 
    mode : "exact", 
    elements : "content",
theme : "advanced",
theme_advanced_buttons1 : "fontselect,fontsizeselect,custombackground", 
theme_advanced_buttons2 : "", 
theme_advanced_buttons3 : "",

setup : function(ed) {
    ed.controlManager = new tinymce.ControlManager(ed);

    ed.controlManager.createColorSplitButton('custombackground', {
        title : 'Background Color',
        image : 'icon.gif',
        onclick : function() {
            // change iFrame background 
        }
    });
}
}); 

</script>
<textarea id="content" name="content" cols="50" rows="15">This is some content that will be editable with TinyMCE.</textarea> 

So I need to get this to add a new color split button to the toolbar. After that I would need the split button to actually change the color of the iFrame. Any help would be greatly appreciated !

EDIT : I have created a fiddle for anyone interested in helping : http://fiddle.tinymce.com/dwcaab

Answer 1

I have created a tinymce fiddle on base of yours. Please check this and tell me if this is what you want.