CKeditor自定义数据插入

Question

For my current project i use cleditor, but want to change to ckeditor. My problem is that i need some custom dropdown which i don't know how to implement in ckeditor. Let me give you an example:

Picture 1:

Picture 2:

So basically i need a dropdown menu with some images and when i click on a certain image it inserts it into the editor textarea.

Answer 1

It's quite straightforward. Take a look on this JSFiddle and use the following code:

CKEDITOR.replace( 'editor', {
    toolbarGroups: [
        { name: 'mode' },
        { name: 'basicstyles' },
        { name: 'styles' }        
   ],
    on: {        
        pluginsLoaded: function() {
            var editor = this,
                config = editor.config;

            // Helper function. Coverts color name into colorful <span>.
            function colorfulSpan( color ) {
                return '<span style="color:' + color + '">' + color + '</span>';
            }

            // AllowedContent rule for the contents inserted by the combo.
            // As this sample combo inserts <span> of certain style only, it's quite short.
            // See: http://docs.ckeditor.com/#!/guide/dev_advanced_content_filter
            var acfRules = 'span{color}';

            // Let the party on!            
            editor.ui.addRichCombo( 'myCombo', {
                label: 'My combo\'s label',
                title: 'My combo',
                toolbar: 'styles',

                // Registers a certain type of contents in the editor.
                allowedContent: acfRules,

                // The minimal content that must be allowed in the editor for this combo to work.
                requiredContent: acfRules,

                // Combo iherits from the panel. Set up it first so all styles
                // of the contents are available in the panel.
                panel: {
                    css: [ CKEDITOR.skin.getPath( 'editor' ) ].concat( config.contentsCss ),
                    multiSelect: false
                },

                // Let's populate the list of available items.
                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 ];

                        // Add entry to the panel.
                        this.add( item, colorfulSpan( item ), item );
                    }
                },

                // This is what happens when the item is clicked.
                onClick: function( value ) {
                    editor.focus();

                    // Register undo snapshot.
                    editor.fire( 'saveSnapshot' );

                    // Insert a colorful <span>.
                    editor.insertHtml( colorfulSpan( value ) );                    

                    // Register another undo snapshot. The insertion becomes undoable.
                    editor.fire( 'saveSnapshot' );
                },

                // The value of the combo may need to be updated, i.e. according to the selection.
                // This is where such listener is supposed to be created.
                onRender: function() {
                    //editor.on( 'selectionChange', function( ev ) {
                    //    var currentValue = this.getValue();
                    //    ...
                    //    this.setValue( value );
                    //}, this );
                },

                // The contents of the combo may change, i.e. according to the selection.
                // This is where it supposed to be updated.
                onOpen: function() {
                },

                // Disable the combo if the current editor's filter does not allow
                // the type of contents that the combo delivers (i.e. widget's nested editable).
                // See: http://docs.ckeditor.com/#!/guide/dev_widgets.
                refresh: function() {
                    if ( !editor.activeFilter.check( acfRules ) )
                        this.setState( CKEDITOR.TRISTATE_DISABLED );
                }
            } );            
        }
    }
} );