CKEditor custom drop-down

HTML

<script src="http://cdn.ckeditor.com/4.4.7/standard/ckeditor.js"></script>
<textarea id="editor">Hello!</textarea>

JavaScript

CKEDITOR.replace( 'editor', {
    toolbarGroups: [
        { name: 'mode' },
        { name: 'basicstyles' },
        { name: 'styles' }        
   ],
    on: {        
        pluginsLoaded: function() {
            var editor = this,
                config = editor.config;                  
            function colorfulSpan( color ) {
                return '<span style="color:' + color + '">' + color + '</span>';
            }
                                         
            editor.ui.addRichCombo( 'myCombo', {
                label: 'My combo\'s label',
                title: 'My combo',
                toolbar: 'styles',
                              
                panel: {
                    css: [ CKEDITOR.skin.getPath( 'editor' ) ].concat( config.contentsCss ),
                    multiSelect: false
                },
   
                init: function() {
                    this.startGroup( 'My custom panel group' );
                    
                    var items = [ 'red', 'orange', 'blue', 'green' ];
    
                    for ( var i = 0; i < items.length; i++ ) {
                        var item = items[ i ];
    
                        this.add( item, colorfulSpan( item ), item );
                    }
                },
    
                
                onClick: function( value ) {
                   editor.focus(); 
                   editor.fire( 'saveSnapshot' );
                   this.setValue(value);                  
                  //  editor.insertHtml(           colorfulSpan(value));                                        
                    editor.fire( 'saveSnapshot' );
                }
                                    
            } );            
        }
    }
} );