26

（可能重复：CKEditor - 无工具栏）

我想创建一个没有工具栏的 CKEditor 实例。我尝试定义一个空工具栏以在实例的配置中使用

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

但是我的实例有一个小的空工具栏，而不是没有工具栏。

我正在使用CKEditor4进行内联编辑。

4

10 回答 10

31

哇 :) 这是我们在实现工具栏时没有想到的。但是我刚刚检查过您可以删除工具栏插件，因为任何其他插件都不需要它。

因此，无需工具栏或使用配置即可构建您自己的CKEditor 包removePlugins- 例如：

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

更新：在 CKEditor 4.1 中引入了高级内容过滤器。在其自动模式下，它由加载到工具栏的按钮配置。没有toolbar插件 ACF 没有配置，所以需要自己做：

var editor = CKEDITOR.inline( 'editable', {
    removePlugins: 'toolbar',
    allowedContent: 'p h1 h2 strong em; a[!href]; img[!src,width,height];'
} );
于 2012-11-28T19:07:28.080 回答
2

在 CKEditor 4.9.2 中：

当您实例化编辑器时，设置工具栏选项：

CKEDITOR.replace( 'editor1', {
    ...
    toolbar: []
});
于 2018-06-09T10:56:26.790 回答
1

我已经关闭了除斜体、粗体和下划线之外的所有配置：

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

    config.removeButtons = 'Strike,Subscript,Superscript,RemoveFormat';
};
于 2019-02-28T12:09:22.117 回答
1

我见过两种方式：

1）使用该removePlugins选项，只需删除工具栏：

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

2）使用 CSS - 不是标准方法：（有点棘手）

只需让 css 显示：none 工具栏，例如

.cke_inner {
    display: none;
}

在 4.13 版本中，您可以隐藏包含工具栏的整个顶部栏：

.cke_inner .cke_top {
    display: none;
}

或仅隐藏工具栏但在顶部保留一条颜色：

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

希望它会帮助某人。

于 2019-08-20T19:19:45.557 回答
0

将此行添加到config.js文件中

config.removePlugins= 'toolbar'
于 2014-12-24T05:11:27.537 回答
0

我在我的项目中添加了用于隐藏/显示工具栏的新功能。

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

如果您想隐藏/显示工具栏，请每次调用此函数。

于 2015-10-05T01:58:40.713 回答
0

在 CKEditor 5 中，不更改配置或编辑器行为的最简单方法是使用 CSS 隐藏工具栏：

.ck.ck-editor__top {
  display: none;
}
于 2020-06-17T14:50:52.087 回答
0

尝试display: none将 CSS 与他们的 id 或他们的类一起使用：

例子：

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

#cke_45用于链接和#cke_46取消链接

将它们一一关闭

于 2020-06-30T11:39:26.093 回答
0

我在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 );
    } );

如果要删除 ckeditor 5 周围的边框，请执行以下操作：

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

    </style>
于 2021-12-07T11:08:42.027 回答
0

CKEditor 5 中更正确的方法：

editor.ui.view.panel.element.setAttribute('style', 'display:none');
于 2022-02-01T10:34:11.777 回答