CODEWITHSUNDEEP
ckeditor
ngungo
ngungo

Reputation: 5322

How to hide toolbar in CKEditor inline

I have an application that needs the inline CKEditor but without toolbar. For the inline CKEditor part I have:

CKEDITOR.disableAutoInline = true;
var editor = CKEDITOR.inline('editable', {on: {
    instanceReady: function() {periodic();}
}});

var periodic = (function() {
    var data, oldData;
    return function() {
        if ((data = editor.getData()) !== oldData) {
            oldData = data;
            $.post("update.php", {txt:data});
        }
        setTimeout(periodic, 1000);
    };
})();

Then for the toolbar hiding part I found this: CKEditor 4 Inline: How to hide toolbar on demand?

//Whenever CKEditor loses focus, We will hide the corresponding toolbar DIV.
function hideToolBarDiv(event) {
   // Select the correct toolbar DIV and hide it.
   //'event.editor.name' returns the name of the DIV receiving focus.
   $('#'+event.editor.name+'TBdiv').hide();
}

Problem is that I have no clue how to combine these two together :) I appreciate for any hint. Thank you.

Upvotes: 2

Views: 7649

Answers (2)

Maniruzzaman Akash
Maniruzzaman Akash

Reputation: 5025

In my eyes, I have done it in two ways:

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

CKEDITOR.inline( 'textarea', {
    removePlugins: 'toolbar'
} );

here, you can also use allowedContent to allow the contents for ACF

CKEDITOR.inline( 'editable', {
    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;
}

Hope it will help someone.

Upvotes: 0

ngungo
ngungo

Reputation: 5322

I found another link that seems to solve my problem: Can I use CKEditor without a toolbar? The script seems to be working alright though I am still not sure if it is a correct way to do it:

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

var periodic = (function() {
    var data, oldData;
    return function() {
        if ((data = editor.getData()) !== oldData) {
            oldData = data;
            $.post("update.php", {txt:data});
        }
        setTimeout(periodic, 1000);
    };
})();

Upvotes: 5

Related Questions