如何从CKeditor 4中删除按钮

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

---

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

我最终找到了解决方法，但我不喜欢这种方式，因为你可以定义你想要的按钮，而不是删除你不想要的按钮。 调用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' ] }
]
});

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

---

有更好的答案吗？

根据reinmar的答案，在这里测试是更好的答案。将此添加到您的ckeditor config.js中：

config.removeButtons = 'Underline,JustifyCenter';

作为参考，您可以在此处找到CKeditor 4按钮的完整列表： 试试看

config.removeButtons = 'Save'; 

---

这将完全删除保存按钮。

要删除按钮，请尝试：

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

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

---

默认情况下，捆绑包附带了一个方便的工具，可以在

ckeditor/samples/toolbarconfigurator/index.html

上找到。它允许您使用GUI配置工具栏。

非常简单。 修改

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.

};

---

在项目的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';

---

打开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';
};

---

在手动删除按钮并通过编辑

config.js

文件对工具栏进行样式化处理后，我找到了工具栏配置程序

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

它位于

ckeditor

文件夹的

/samples/toolbarconfigurator

中。只需启动

index.html

。工具栏配置器包含在上的所有不同下载包中

创建完工具栏后，只需单击

Get toolbar config

，然后将样式复制到位于主

ckeditor

文件夹中的

config.js

文件中

---

解决此问题的第一种方法

转到

节点模块->@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}

---

通过执行以下操作，您可以按所需顺序使用任意按钮创建自己的工具栏：

设置自定义工具栏

CKEDITOR.config.toolbar\u MA=[ ['Source'、'-'、'Cut'、'Copy'、'Paste'、'-'、'Undo'、'RemoveFormat'、'-'、'Link'、'Unlink'、'Anchor'、'-'、'Image'、'Table'、'HorizontalRule'、'SpecialChar']， “/”、[“格式”、“模板”、“粗体”、“斜体”、“下划线”、“上标”、“上标”、“左对齐”、“居中对齐”、“右对齐”、“块对齐”]， “-”、“NumberedList”、“BulletedList”、“Outdent”、“Indent”] ];

2）创建ckeditor实例时选择它

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

---

看见如果删除整个插件，按钮也将被删除（使用。不知道为什么会被否决；我使用removeButtons从最小的CK编辑器实例中删除链接，它删除了链接相关的按钮，但没有特别好的理由在中添加了大量额外的按钮，并且使用此技术显式添加我想要的几个按钮是唯一有效的方法。好吧，如果您希望但是有一些，也许选择的最佳答案更合适。但是如果您只需要一些操作，这就是正确的答案。谢谢朋友。顺便说一句，对于阅读本文并苦苦挣扎的其他人，请注意，如果您有多个。ckeditor.config.removePlugins=“forms”，则按钮名称之间不能有空格；当使用asp.net控件查看更多值时，我认为config.removeButtons仅在CKEditor版本>3中可用。我现在无法更新。仅对处于我位置的人进行评论。编辑：我刚刚注意到问题概述了CKEditor版本4。哇。我不应该像我一样扫描这么多页面。如果您的代码库有重复的副本使用不同配置的CKeditor代码的名称-可能这很明显，但只需grep for

removeButtons

。我之所以提到它，是因为我维护了一个代码库，其中包含CKeditor配置的文件并不都命名为

config.js

（来自以前结合了各种源代码的人，等等）此外，如果未找到

移除按钮

，请查找

工具栏组

或

工具栏

（取决于版本），然后从那里开始。是否还要添加一个按钮-如果我有两个CK编辑器，并且我希望图像按钮从一个编辑器中删除，但留在另一个编辑器上，我将如何实现这一点？这是可行的，但当我试图通过在上面的列表中添加“源”来删除源按钮时，它不会删除源按钮。有任何线索吗？完美示例：）最佳答案。这正是我想要的。谢谢这是更好的解决方案。谢谢，这是这里最有用的答案。我错过了位于/samples/toolbarconfigurator中的

部分。特别棒的是，在高级模式下，您可以将按钮安排在任何位置、任何行、任何位置。这是最有用的答案。