CKEDITOR: Display Source mode as tabs instead of single button

Question

Is there any way to make CKEDITOR display the source mode option as two tabs (HTML / SOURCE views) instead of a single Source button?

Answer 1

No. But with a little help of CKEditor API, it's a piece of cake (JSFiddle).

HTML. Tabs are based on "radio+label" technique, which is pretty common and described in this article. Note that there's no need to create real tabs since the editor itself will change its contents. I did it to reduce JS – you can still control your tabs with JS if you want.

<div class="tabs">
    <input type="radio" id="tab-wysiwyg" name="mode" checked>
    <label for="tab-wysiwyg">WYSIWYG</label>

    <input type="radio" id="tab-source" name="mode">
    <label for="tab-source">Source</label>

    <textarea id="editor">Hello!</textarea>    
</div>

JS. Note that listeners can also be applied with jQuery or any other DOM library you use. I used CKEditor DOM API to keep it simple. The only thing which is worth mentioning is editor.setMode. You can also attach listeners externally: CKEDITOR.replace returns editor instance, which is also stored in global CKEDITOR.instances object.

CKEDITOR.replace( 'editor', {
    toolbarGroups: [ { name: 'basicstyles' } ],
    on: {
        instanceReady: function() {            
            var doc = CKEDITOR.document,
                editor = this;

            doc.getById( 'tab-wysiwyg' ).on( 'click', function() {
                editor.setMode( 'wysiwyg' );
            } );

            doc.getById( 'tab-source' ).on( 'click', function() {
                editor.setMode( 'source' );
            } );            
        }
    }
} );

CSS (for tabs). Styling, eyecandy....

.tabs [type=radio] {
    display: none;
    position: absolute;
}

.tabs [type=radio] + label {
    font-size: 12px;
    display: block;
    float: left;
    border: 1px solid #bbb;
    cursor: pointer;
    padding: .5em 1em;
    color: #888;
    position: relative;
    margin-right: -1px;
    margin-bottom: -1px;
    opacity: .8;
    font-weight: bold;    
}

.tabs label:hover {
    background: #f7f7f7;
}

.tabs [type=radio]:checked + label {
    background: rgb(244,244,244);
    opacity: 1;
    color: #000;
}

.tabs .cke_editor_editor {
    clear: both;
}

Extra: You can also use config.toolbarCanCollapse option and editor.execCommand( 'toolbarCollapse' ); to minimize the toolbar in source mode. Have fun!