我可以在没有工具栏的情况下使用 CKEditor 吗？

Posted 2023-02-16

【中文标题】我可以在没有工具栏的情况下使用 CKEditor 吗？

【英文标题】：Can I use CKEditor without a toolbar?

【发布时间】：2012-11-16 16:14:36

【问题描述】：

（可能重复：CKEditor - No toolbars）

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

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

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

我在 CKEditor4 中使用 inline editing。

【参考方案1】：

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

所以build your ownCKEditor 包没有工具栏或使用removePlugins 配置 - 例如：

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

更新：在 CKEditor 4.1 中引入了Advanced Content Filter。在其automatic mode 中，它由加载到工具栏的按钮配置。没有toolbar插件没有配置ACF，所以需要自己做：

var editor = CKEDITOR.inline( 'editable', 
    removePlugins: 'toolbar',
    allowedContent: 'p h1 h2 strong em; a[!href]; img[!src,width,height];'
 );

【讨论】：

很好的答案，删除工具栏插件效果很好。至于 ACF，每个人都会称之为禁忌，但如果您不想列出几乎所有具有的 html 元素，可以将 config.allowedContent 设置为 true，确实存在，并将永远存在。

呵呵 :) 当你想允许“几乎每个html元素”，那么禁用ACF绝对是可以接受的。

我需要禁用以下所有插件才能摆脱工具栏：removePlugins: 'toolbar, pastefromword, tableselection, uploadwidget, clipboard, pastetext, widget, uploadimage',

【参考方案2】：

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

config.removePlugins= 'toolbar'

【参考方案3】：

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

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

如果你想隐藏/显示工具栏，每次调用这个函数。

【参考方案4】：

在 CKEditor 4.9.2 中：

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

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

【参考方案5】：

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

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

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

【参考方案6】：

我见过两种方式：

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;

希望对某人有所帮助。

【讨论】：

CSS 选项最适合我。它不需要重建。此外，键盘快捷键仍然有效。

【参考方案7】：

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

.ck.ck-editor__top 
  display: none;

【参考方案8】：

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

例子：

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

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

一一关闭

【参考方案9】：

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