CODEWITHSUNDEEP
javascriptckeditor
Sam Selikoff
Sam Selikoff

Reputation: 12704

Can I use CKEditor without a toolbar?

(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 config

oConfigName.toolbar = 'Custom';
oConfigName.toolbar_Custom = [];

but I get a small empty toolbar by my instance, instead of no toolbar.

I am using inline editing with CKEditor4.

Upvotes: 28

Views: 50993

Answers (12)

Vasilii Suricov
Vasilii Suricov

Reputation: 954

So, to apply styles in readonly mode this works for CKEditor 4.11.4

  CKEDITOR.replace(inputId, {
    extraAllowedContent: 'style;*[id,rel](*){*}',
    readOnly: true,
    // removePlugins: 'toolbar',
    toolbarCanCollapse: true, //Button to toggle toolbar (show/hide) 
    toolbarStartupExpanded: false, 
    // toolbar: [],
    // allowedContent: 'p h1 h2 strong em; a[!href]; img[!src,width,height];',
  });

commented rows do not make any sense or even wasting result

Upvotes: 0

ivlasov
ivlasov

Reputation: 3

More correct way in CKEditor 5:

editor.ui.view.stickyPanel.element.setAttribute('style', 'display:none');

Upvotes: 0

Karol Pawlak
Karol Pawlak

Reputation: 464

I would suggest looking at official documentation when using CKEditor 5. It covers hiding toolbar especialy when using read-only mode.

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        // ...
    } )
    .then( editor => {
        const toolbarElement = editor.ui.view.toolbar.element;

        editor.on( 'change:isReadOnly', ( evt, propertyName, isReadOnly ) => {
            if ( isReadOnly ) {
                toolbarElement.style.display = 'none';
            } else {
                toolbarElement.style.display = 'flex';
            }
        } );
    } )
    .catch( error => {
        console.log( error );
    } );

Upvotes: 0

Sully
Sully

Reputation: 417

I do this in ckeditor5:

ClassicEditor
    .create( document.querySelector( '.editor' ), {
        licenseKey: '',
        toolbar: [],

    } )
    .then( editor => {
        window.editor = editor;
        editor.isReadOnly = true;


    } )
    .catch( error => {
        console.error( 'Oops, something went wrong!' );
        console.error( 'Please, report the following error on https://github.com/ckeditor/ckeditor5/issues with the build id and the error stack trace:' );
        console.warn( 'Build id: efxy8wt6qchd-qhxgzg9ulnyo' );
        console.error( error );
    } );

if you want to remove border around ckeditor 5 do this:

 <style>
        .ck{
            border:0px !important;
        }

    </style>

Upvotes: 2

Kiran jadhav
Kiran jadhav

Reputation: 1

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

Upvotes: 0

Hubert Perron
Hubert Perron

Reputation: 3022

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;
}

Upvotes: 0

Maniruzzaman Akash
Maniruzzaman Akash

Reputation: 5035

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.

Upvotes: 3

Arseniy
Arseniy

Reputation: 11

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';
};

Upvotes: 1

c-toesca
c-toesca

Reputation: 1017

In CKEditor 4.9.2:

When you instanciate the editor, set toolbar option: 

CKEDITOR.replace( 'editor1', {
    ...
    toolbar: []
});

Upvotes: 8

Andrej
Andrej

Reputation: 707

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.

Upvotes: 0

Reinmar
Reinmar

Reputation: 22023

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];'
} );

Upvotes: 30

Edwin Thomas
Edwin Thomas

Reputation: 1186

Add this this line in to config.js file

config.removePlugins= 'toolbar'

Upvotes: 0

Related Questions