Can I use CKEditor without a toolbar?

Question

(Possible duplicate: CKEditor - No toolbars)

I\'d like to create a CKEditor instance without a toolbar. I tried defining an empty toolbar to use in the instance\'s c

Answer 1

In CKEditor 5 the easiest way without changing configuration or editor behaviour is to hide the toolbar using CSS:

.ck.ck-editor__top {
  display: none;
}

Answer 2

I've turned off everything except italics, bold and underlined with this config:

CKEDITOR.editorConfig = function( config ) {
    config.autoParagraph = false;
    config.toolbarGroups = [
        { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
    ];

    config.removeButtons = 'Strike,Subscript,Superscript,RemoveFormat';
};

Answer 3

I have added new function into my project for hide/show of the toolbar.

function onClickToolbarButton() {
    var bar = document.getElementById("cke_1_top");
    if(bar.style.display == "none"){
        bar.style.display = "block";
    }else{
        bar.style.display = "none";
    }

    //resize web page
    //onresize();
}

Call this function every time, if you want hide/show toolbar.

Answer 4

Wow :) This is something that we haven't thought of while implementing toolbar. But I've just checked that you can remove toolbar plugin, because it isn't required by any other plugin.

So build your own CKEditor package without toolbar or use removePlugins configuration - e.g.:

var editor = CKEDITOR.inline( 'editable', {
    removePlugins: 'toolbar'
} );

Update: In CKEditor 4.1 the Advanced Content Filter was introduced. In its automatic mode it is configured by buttons which are loaded to toolbar. Without toolbar plugin ACF is not configured, so one need to do this on his own:

var editor = CKEDITOR.inline( 'editable', {
    removePlugins: 'toolbar',
    allowedContent: 'p h1 h2 strong em; a[!href]; img[!src,width,height];'
} );

Answer 5

Try display: none using CSS with their ids or their class:

Example:

#cke_19, #cke_18, #cke_22, #cke_46, #cke_45 {
    display:none;
}

#cke_45 is for link and #cke_46 for unlink

To turn them off one by one

Answer 6

There are two ways I have seen:

1) Using the removePlugins option and just remove the toolbar:

CKEDITOR.inline( 'textarea', {
    removePlugins: 'toolbar',
    allowedContent: 'p h1 h2 strong em; a[!href]; img[!src,width,height];'
} );

2) Using CSS - Not the standard approach: (little tricky)

Just make css to display:none the toolbar, like

.cke_inner {
    display: none;
}

In version 4.13, you can hide the entire top bar containing the toolbar:

.cke_inner .cke_top {
    display: none;
}

or hide only the toolbar but keep a strip of color at the top:

.cke_inner .cke_top .cke_toolbox {
    display: none;
}

Hope it will help someone.