如何从CKeditor 4中删除按钮

时间:2014-05-08 09:57:32

标签: ckeditor

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

文档没有清楚地回答

12 个答案:

答案 0 :(得分:43)

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

config.removeButtons = 'Underline,JustifyCenter';

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

答案 1 :(得分:33)

我最终找到了,但我不喜欢这种方式,而不是删除你不想要的东西,你定义了你想要的按钮(而不是放在你不想要的东西)。 当您调用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' ] }
]
});

(供参考,这是标准的完整工具栏)  项目代表按钮,因此只需删除您不想要的项目。 多数民众赞成。

有没有更好的答案?

答案 2 :(得分:13)

要删除按钮,请尝试:

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

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

list-buttons

答案 3 :(得分:9)

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

答案 4 :(得分:7)

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

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

它位于/samples/toolbarconfigurator文件夹的ckeditor。只需启动index.html即可。工具栏配置器包含在download page

的所有不同下载包中

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

enter image description here

答案 5 :(得分:5)

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

答案 6 :(得分:3)

打开您的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 :(得分:1)

它如此简单。 修改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.

};

答案 8 :(得分:0)

尝试

config.removeButtons = 'Save'; 

这将完全删除保存按钮。

答案 9 :(得分:0)

解决此问题的第一种方法

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

defaultConfig中搜索或搜索ckeditor.js ---您将在最后几行中找到

此处删除表格,媒体等不需要的字段

解决问题的第二种方法

以下是完整列表:

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}

答案 10 :(得分:0)

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

  1. 设置定制工具栏

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

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

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

答案 11 :(得分:-4)

    CKEDITOR.config.removePlugins =' elementspath,save,about,forms,find,selectall,specialchar,flash,smiley,iframe,showblocks,language'