Can I use CKEditor without a toolbar?

余生颓废 提交于 2019-11-28 21:13:42
Reinmar

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

Add this this line in to config.js file

config.removePlugins= 'toolbar'

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.

In CKEditor 4.9.2:

When you instanciate the editor, set toolbar option:

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

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

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

Hope it will help someone.

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!