我能否在不使用工具栏的情况下使用CKEditor？

Question

我能否在不使用工具栏的情况下使用CKEditor？

27

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

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

但是在我的实例中，我得到了一个小的空工具栏，而不是没有工具栏。

我正在使用 CKEditor4 的内联编辑。

- Sam Selikoff

12个回答

6

在CKEditor 4.9.2版本中：当您实例化编辑器时，请设置工具栏选项：

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

- c-toesca

2

我在 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>

- Salione

2

我见过两种方法：

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

希望它能帮助到某个人。

- Maniruzzaman Akash

CSS选项对我来说效果最好。它不需要重新构建。此外，键盘快捷键仍然有效。 - Erel Segal-Halevi

1

我使用以下配置关闭了除斜体、粗体和下划线之外的所有内容：

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

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

- Arseniy

0

我建议在使用CKEditor 5时查看官方文档。它涵盖了在只读模式下隐藏工具栏的内容。

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

- Karol Pawlak

0

在CKEditor 5中更正确的方式：

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

- ivlasov

虽然这段代码可能回答了问题，但最好包含一些上下文，解释它的工作原理以及何时使用它。仅有代码的答案从长远来看并不有用。 - CascadiaJS

当您有多个CKEditor实例并且不需要隐藏所有实例的工具栏时，它的效果更好。此代码仅隐藏当前CKEditor实例的工具栏。 - ivlasov

0

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

config.removePlugins= 'toolbar'

- Edwin Thomas

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

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

- Andrej

0

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

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

- Hubert Perron

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Reinmar · Accepted Answer

哇 :) 在实现工具栏时我们没有想到过这一点。但我刚刚检查了一下，您可以删除工具栏插件，因为没有其他插件需要它。

所以构建您自己的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];'
} );