CKEditor 4.5.1 – toolbarless editor

by oleq

HTML

<script src="http://cdn.ckeditor.com/4.5.1/full-all/ckeditor.js"></script>
<textarea id="toolbarless">
    <h1>Toolbarless CKEditor done right</h1>
    <p>CKEditor <a href="http://docs.ckeditor.com/#!/guide/dev_advanced_content_filter">protects the consistency and semantics of data</a>. Edited content always corresponds with enabled features (buttons, drop–downs, dialogs, etc.), which simply means: no <em>"Bold"</em> button in the toolbar, no bold text in the content. So if there's no toolbar, none of the rich content that would normally be provided by the buttons is allowed in the editor.</p>            

    <h2>The trick</h2>
    <p>This is a <a href="http://docs.ckeditor.com/#!/guide/dev_framed">classic</a> editor instance configured <strong>without</strong> <a href="http://ckeditor.com/addon/toolbar">Editor Toolbar</a> plugin. It <strong>does not</strong> require <code>config.allowedContent = true</code> to load a rich content, a hack used by developers to run "toolbarless" editors, which, by the way, allows any kind of "garbage HTML" into a database.</p>

    <p>The solution is to register all <code>editor.ui.items</code> as enabled features before editor's filter is initialized:</p>
    
<pre><code class="language-javascript">CKEDITOR.replace( 'toolbarless', {
    removePlugins: 'toolbar,resize,elementspath',
    on: {
        pluginsLoaded: function() {
            for ( var i in this.ui.items ) {
                this.addFeature( this.ui.create( i ) );
            }
        }
    }
} );
</code></pre>
</textarea>    

<hr>

External toolbar: <button id="bold" type="button">Bold</button>

CSS

button {
    font-size: 14px;
    background: white;
    border: 1px solid #ccc;
}

button:focus,
button:active,
button.active {
    box-shadow: 2px 2px 3px #aaa inset;
    background: #ccc;
}

JavaScript

CKEDITOR.replace( 'toolbarless', {
    removePlugins: 'toolbar,resize,elementspath',
    
    extraPlugins: 'codesnippet',
    codeSnippet_theme: 'monokai_sublime',
    height: 600,
    on: {
        pluginsLoaded: function() {
            for ( var i in this.ui.items ) {
                this.addFeature( this.ui.create( i ) );
            }
            
            var boldCommand = this.getCommand( 'bold' ),
                boldButton = CKEDITOR.document.getById( 'bold' );
            
            boldCommand.on( 'state', function( evt ) {
                boldButton[ boldCommand.state == CKEDITOR.TRISTATE_OFF ? 'removeClass' : 'addClass' ]( 'active' );
            } );
            
            boldButton.on( 'click', function() {
                this.execCommand( 'bold' );
            }, this );
        }
    }
} );