如何从 CKeditor 4 中删除按钮答案

【问题标题】：How to remove buttons from CKeditor 4如何从 CKeditor 4 中删除按钮
【发布时间】：2014-06-25 15:36:04
【问题描述】：

问题在标题中：如何从 CKeditor 4 中删除按钮。

文档没有明确回答

【问题讨论】：

【解决方案1】：

基于 reinmar 的答案并在此处测试是更好的答案。将此添加到您的 ckeditor config.js 中：

config.removeButtons = 'Underline,JustifyCenter';

您可以在此处找到 CKeditor 4 按钮的完整列表作为参考： http://ckeditor.com/comment/123266#comment-123266

【讨论】：

顺便说一句，对于其他阅读本文并苦苦挣扎的人，请注意，如果您有多个按钮名称，则按钮名称之间必须有 NO 空格。
ckeditor.config.removePlugins = "forms";使用 asp.net 控件时，请查看更多值 fir csv docs.cksource.com/CKEditor_3.x/Developers_Guide/Toolbar
我认为 config.removeButtons 仅在 CKEditor 版本 > 3 中可用。我目前无法更新。只是评论那些在我的位置。编辑：我刚刚注意到问题概述了 CKEditor 版本 4。哎呀。我不应该像我一样扫描 SO 页面..
如果你的代码库有 CKeditor 代码的重复副本，具有不同的配置 - 也许很明显，但只需 grep 获取 removeButtons。我之所以提到它，是因为我正在维护一个代码库，其中包含 CKEditor 配置的文件并非全部命名为 config.js。（来自以前结合各种来源的人等等。）另外，如果你没有找到removeButtons，请查找toolbarGroups 或toolbar（取决于版本），然后从那里开始。
是否有然后添加一个按钮 - 如果我有两个 CK 编辑器，我希望从一个中删除图像按钮但留在另一个上，我将如何实现？

【解决方案2】：

我终于找到了方法，但我不喜欢这种方式，因为不是删除你不想要的东西，而是定义你想要的按钮（并且根本不放你不想要的东西）。当您调用 CKeditor.replace 时，您可以像这样定义工具栏：

    CKEDITOR.replace( 'YOURE_TEXT_AREA_ID', {
    toolbar: [
    { name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Source', '-', 'Save', 'NewPage', 'Preview', 'Print', '-', 'Templates' ] },
    { name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
    { name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ], items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] },
    { name: 'forms', items: [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
    '/',
    { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
    { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl', 'Language' ] },
    { name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
    { name: 'insert', items: [ 'Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe' ] },
    '/',
    { name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] },
    { name: 'colors', items: [ 'TextColor', 'BGColor' ] },
    { name: 'tools', items: [ 'Maximize', 'ShowBlocks' ] },
    { name: 'others', items: [ '-' ] },
    { name: 'about', items: [ 'About' ] }
]
});

（作为参考，这是标准的完整工具栏）项目代表按钮，因此只需删除您不想要的项目。就是这样。

还有更好的答案吗？

【讨论】：

见config.removeButtons。如果您删除整个插件，按钮也会被删除（使用 config.removePlugins.
不知道为什么这被否决了；我使用 removeButtons 从最小的 CK 编辑器实例中删除链接，它删除了与链接相关的按钮，但没有特别好的理由添加了许多额外的按钮，并且使用这种技术显式添加我想要的几个是唯一的事情那行得通。
好吧，如果您想要除少数之外的所有操作，那么选择的最佳答案可能更合适。但是，如果您只需要一些操作，这是正确的答案。谢谢朋友。

【解决方案3】：

在通过编辑config.js 文件手动删除按钮和设置工具栏样式后，我找到了工具栏配置器。

您可以轻松启用或禁用按钮。更改按钮组顺序并添加分隔符。

它位于ckeditor 文件夹的/samples/toolbarconfigurator 中。只需启动index.html。工具栏配置器包含在download page 上的所有不同下载包中

创建工具栏后，只需单击Get toolbar config 并将样式复制到位于主ckeditor 文件夹中的config.js 文件。

【讨论】：

谢谢，这是最有帮助的答案。我错过了located in the /samples/toolbarconfigurator 部分。特别棒的是，在高级模式中，您可以将按钮安排在您想要的任何位置、任何行、任何位置。
这是最有帮助的答案。

【解决方案4】：

要删除按钮，请尝试：

$(document).ready(function() {
   CKEDITOR.config.removePlugins = 'Save,Print,Preview,Find,About,Maximize,ShowBlocks';
});

逗号分隔的列表必须包含您要删除的每个按钮的名称。以下链接是包含工具栏 ckeditor 的按钮的完整列表：

list-buttons

【讨论】：

这是有效的，但是当我尝试通过在上面的列表中添加“源”来删除源按钮时，它不会删除源按钮。有什么线索吗？？
完美的例子:)

【解决方案5】：

在你的项目的scripts/ckeditor/里面的config.js文件中，按照下面的方式进行

config.removePlugins = 'elementspath,save,image,flash,iframe,link,smiley,tabletools,find,pagebreak,templates,about,maximize,showblocks,newpage,language';

config.removeButtons = 'Copy,Cut,Paste,Undo,Redo,Print,Form,TextField,Textarea,Button,SelectAll,NumberedList,BulletedList,CreateDiv,Table,PasteText,PasteFromWord,Select,HiddenField';

【讨论】：

这是更好的解决方案。

【解决方案6】：

打开您的 config.js 文件并粘贴此代码

CKEDITOR.editorConfig = function( config ) {
    // Define changes to default configuration here. For example:
    // config.language = 'fr';
    // config.uiColor = '#AADC6E';
    config.removePlugins = 'blockquote,save,flash,iframe,tabletools,pagebreak,templates,about,showblocks,newpage,language,print,div';
    config.removeButtons = 'Print,Form,TextField,Textarea,Button,CreateDiv,PasteText,PasteFromWord,Select,HiddenField,Radio,Checkbox,ImageButton,Anchor,BidiLtr,BidiRtl,Font,Format,Styles,Preview,Indent,Outdent';
};

【讨论】：

【解决方案7】：

捆绑包默认附带一个方便的工具，可以在ckeditor/samples/toolbarconfigurator/index.html 找到。它允许您使用 GUI 配置工具栏。

【讨论】：

最佳答案。这正是我想要的。谢谢

【解决方案8】：

它是如此简单。修改config.js文件如下

CKEDITOR.editorConfig = function (config) {

config.removePlugins = 'save,newpage,flash,about,iframe,language'; 
//The options which you don't need in the toolbar, you can add them in the above remove plugins list.

};

【讨论】：

【解决方案9】：

试试

config.removeButtons = 'Save';

这将完全删除保存按钮。

【讨论】：

【解决方案10】：

解决这个问题的第一种方法

转到node modules -> @ckeditor -> ckeditor-build-classic -> build ->ckeditor.js

去或在ckeditor.js 中搜索defaultConfig --- 你会在最后几行找到

这里删除不需要的字段，如表格、媒体等

解决问题的第二种方法

以下是完整列表：

defaultConfig={toolbar:{items:["heading","|","bold","italic","link","bulletedList","numberedList","|","indent","outdent","|","imageUpload","blockQuote","insertTable","mediaEmbed","undo","redo"]},image:{toolbar:["imageStyle:full","imageStyle:side","|","imageTextAlternative"]},table:{contentToolbar:["tableColumn","tableRow","mergeTableCells"]},language:"en"}}]).default}

例如 - 从编辑器中删除表格

defaultConfig={toolbar:{items:["heading","|","bold","italic","link","bulletedList","numberedList","|","indent","outdent","|","imageUpload","blockQuote","mediaEmbed","undo","redo"]},image:{toolbar:["imageStyle:full","imageStyle:side","|","imageTextAlternative"]},language:"en"}}]).default}

放入component.ts文件的构造函数

ClassicEditor.defaultConfig={toolbar:{items:["heading","|","bold","italic","link","bulletedList","numberedList","|","indent","outdent","|","imageUpload","blockQuote","mediaEmbed","undo","redo"]},image:{toolbar:["imageStyle:full","imageStyle:side","|","imageTextAlternative"]},language:"en"}}]).default}

【讨论】：

【解决方案11】：

您可以按照您想要的任何顺序使用您想要的任何按钮创建您自己的工具栏：

设置定制工具栏

CKEDITOR.config.toolbar_MA = [ ['Source','-','Cut','Copy','Paste','-','Undo','Redo','RemoveFormat','-','Link','Unlink',' Anchor','-','Image','Table','HorizontalRule','SpecialChar'], '/', ['格式','模板','粗体','斜体','下划线','-','上标','-',['JustifyLeft','JustifyCenter','JustifyRight', 'JustifyBlock'], '-','NumberedList','BulletedList','-','Outdent','Indent'] ];

2) 在创建 ckeditor 实例时选择它

  CKEDITOR.replace( 'myeditor',{   toolbar:'MA' });

【讨论】：