Question

What I am ultimately trying to do is to implement some simple code highlighter (/Syntax Highlighter) since there was nothing available in ckEditor. For this reason I am thinking to add a new button ( or modify one of the existing buttons) by clicking which the selected text changes in the following manner:
1- gets mono-space font to preserve indentations in source code (e.g. “Courier New”)
2- the font color changes to blue

Since I don’t know how to add a new button I was thinking to use one of the existing buttons, say block quote button, to do the job.

added note:
by the way I just noticed that the ckEditor 4 is out too: ckeditor 4
where the plugins are customizable too:ckeditor 4 builder

Answer 1

You can consider the following plugin I created from scratch in hurry (this is not a full solution but it shows the right direction):

(function() {
    'use strict';

    CKEDITOR.plugins.add( 'prettify', {
        icons: 'prettify',
        init: function( editor ) {
            editor.on( 'mode', function( event ) {
                if( editor.mode == 'wysiwyg' )
                    insertResources( editor );
            });

            editor.addCommand( 'prettify', {
                exec: function( editor ) {
                    var selection = editor.getSelection(),
                        startElement = selection.getStartElement();

                    if ( startElement.hasClass( 'prettyprint' ) )
                        return;

                    var contents = startElement.getText();

                    // Naive pre-processing.
                    contents = contents.replace( /\n/g ,'<br>' );
                    contents = contents.replace( /\t/g ,'&nbsp;&nbsp;&nbsp;&nbsp;' );
                    contents = contents.replace( / /g ,'&nbsp;' );

                    startElement.setHtml( prettyPrintOne( contents, 'js', 0 ) );
                    startElement.addClass( 'prettyprint' );
                }
            });

            editor.ui.addButton( 'Prettify', {
                label: 'Prettify',
                command: 'prettify',
                toolbar: 'insert'
            });
        }
    });

    function insertResources( editor ) {
        var outerHead = CKEDITOR.document.getHead(),
            innerHead = editor.document.getHead(),
            path = CKEDITOR.plugins.getPath( 'prettify' );

        outerHead.append( CKEDITOR.document.createElement( 'script', {
            attributes: {
                type: 'text/javascript',
                async: 'true',
                src: path + 'lib/prettify.js'
            }
        }));

        innerHead.append( CKEDITOR.document.createElement( 'link', {
            attributes: {
                rel: 'stylesheet',
                href: path + 'lib/prettify.css'
            }
        }));
    }
})();

To run it, extract Google Prettify library into lib directory of prettify plugin. Then try the following HTML and use the button in the toolbar to prettify pre:

<textarea cols="80" id="editor1" name="editor1" rows="10">
<pre>function insertResources( editor ) {
    var outerHead = CKEDITOR.document.getHead(),
        innerHead = editor.document.getHead(),
        path = CKEDITOR.plugins.getPath( 'prettify' );
</pre>

<p>Foo:</p>

<pre>outerHead.append( CKEDITOR.document.createElement( 'script', {
        attributes: {
            type: 'text/javascript',
            async: 'true',
            src: path + 'lib/prettify.js'
        }
    }));</pre>

<p>Bar:</p>

<pre>innerHead.append( CKEDITOR.document.createElement( 'link', {
        attributes: {
            rel: 'stylesheet',
            href: path + 'lib/prettify.css'
        }
    }));
}</pre>
</textarea>
<script>

    CKEDITOR.replace( 'editor1', {
        extraPlugins: 'prettify',
        toolbar: [
            [ 'Source', '-', 'NewPage', 'Preview', '-', 'Templates' ],
            [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ],
            [ 'Bold', 'Italic' ],
            '/',
            [ 'Prettify']
        ]
    } );

</script>