如何从CKeditor 4中删除按钮

Question

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

文档并没有清楚地回答这个问题。

- Thony

Answer 1

基于reinmar的答案并在此处进行了测试，以下是更好的答案。将其添加到您的 ckeditor config.js：

config.removeButtons = 'Underline,JustifyCenter';

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

- Thony

---

顺便说一下，如果有其他人在阅读并且遇到问题，请注意，如果您有多个按钮名称，则它们之间不得有空格。 - nchaud

ckeditor.config.removePlugins = "forms"; 当使用asp.net控件时，请查看更多csv值 http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Toolbar - Iman

我认为config.removeButtons仅适用于CKEditor版本> 3。我现在无法更新。只是为那些和我处境相同的人进行评论。编辑：我刚注意到问题概述了CKEditor版本4。哎呀。我不应该像我这样经常扫描SO页面。 - jonathanbell

如果您的代码库中有CKeditor代码的重复副本，且配置不同 - 也许这很明显，但只需使用removeButtons进行grep。我提到这一点是因为我正在维护一个代码库，其中包含CKEditor配置的文件并非全部命名为config.js。（之前将各种来源组合在一起的人）此外，如果您找不到removeButtons，请查找toolbarGroups或toolbar（根据版本而定），然后从那里开始。 - floer32

有没有任何方法可以添加一个按钮——如果我有两个CK编辑器，并且我想从其中一个中删除图像按钮，但保留在另一个上，我该如何实现？ - Ctrl_Alt_Defeat

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

（供参考，这是标准完整工具栏） 每个项目都代表一个按钮，因此只需删除不需要的项目即可。 就是这样。

有更好的答案吗？

- Thony

---

请参考config.removeButtons。如果您使用config.removePlugins删除整个插件，则按钮也将被删除。 - Reinmar

不确定为什么会被踩，我使用了removeButtons来从一个极简的CK编辑器实例中移除链接，并且它删除了与链接相关的按钮，但出于没有特别好的原因，又添加了很多额外的按钮，所以使用这种技术来显式地添加我想要的少数按钮是唯一有效的方法。 - Whelkaholism

如果你想要所有的操作，但是除了一些特定的操作，也许最佳答案更适合你。但是如果你只需要几个操作，那么这个答案就是正确的选择。谢谢，伙计。 - Luis Milanese

Answer 3

经过手动删除按钮并编辑config.js文件以调整工具栏样式后，我找到了ToolBar Configurator。

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

它位于ckeditor文件夹的/samples/toolbarconfigurator中。只需启动index.html即可。Toolbar Configurator包含在下载页面上所有不同的下载包中。

创建完工具栏后，只需单击获取工具栏配置并将样式复制到位于主ckeditor文件夹中的config.js文件中即可。

- VDWWD

---

谢谢，这是这里最有帮助的答案。我错过了位于/samples/toolbarconfigurator的部分。特别棒的是，在“高级模式”下，您可以将按钮排列在任何您想要的位置，任何行，任何地方。 - Ilia

这是最有帮助的答案。 - Naveen Saroye

Answer 4

要删除按钮，请尝试：

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

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

按钮列表

- Christian Nieblas

---

这个程序是可以工作的，但是当我尝试通过在上面的列表中添加“source”来移除源按钮时，它并没有移除源按钮。有什么线索吗？ - Half Blood Prince

完美的例子 :) - stackers

链接失效.... - Stefan

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

- user3783446

---

这是更好的解决方案。 - Pujan

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

- Himanshu

Answer 7

默认情况下，CKEditor捆绑了一个非常方便的工具，可以在ckeditor/samples/toolbarconfigurator/index.html路径下找到。使用该工具，您可以通过GUI配置工具栏。

- Hp93

---

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

Answer 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.

};

- Ankit Gorakhpuriya

Answer 9

通过以下步骤，您可以创建自己的工具栏，并按照您想要的顺序添加任何按钮：

1. 设置专属工具栏

   CKEDITOR.config.toolbar_MA = [ ['Source','-','Cut','Copy','Paste','-','Undo','Redo','RemoveFormat','-','Link','Unlink','Anchor','-','Image','Table','HorizontalRule','SpecialChar'], '/', ['Format','Templates','Bold','Italic','Underline','-','Superscript','-',['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'], '-','NumberedList','BulletedList','-','Outdent','Indent'] ];

2)创建ck编辑器实例时选择它

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

- Mobarok Hossen

Answer 10

尝试一下

config.removeButtons = 'Save'; 

这将完全删除保存按钮。

- Viral