What toolbar buttons are available in CKEditor 4?

Question

The CKEditor docs mention item by item toolbar configuration here, but where is a list of the names of the buttons in the different groups?

There is a similar question here, but the answer is for a previous version of CKEditor. Some of the button names do not work.

Answer 1

You can check the toolbar sample in your CKEditor package.

There, you've got listed all buttons and all toolbar groups (since CKEditor 4 there are two ways of setting toolbar layout) that are enabled in your CKEditor build.

If you don't see a button that you remembered from CKEditor 3, check if it's available in your CKEditor package version (there are now 3 - basic, std and full). Some plugins are not included in any of these builds and you have to create your own.

PS. If you're using standard or basic build check config.js file - some buttons like Underline are removed in these presets by setting config.removeButtons.

Answer 2

Here is a nice list of button names:

Complete List of Toolbar Items for CKEditor

items

• "Source"
• "Save"
• "NewPage"
• "DocProps"
• "Preview"
• "Print"
• "Templates"
• "document"

items

• "Cut"
• "Copy"
• "Paste"
• "PasteText"
• "PasteFromWord"
• "Undo"
• "Redo"

items

• "Find"
• "Replace"
• "SelectAll"
• "Scayt"

items

• "Form"
• "Checkbox"
• "Radio"
• "TextField"
• "Textarea"
• "Select"
• "Button"
• "ImageButton"
• "HiddenField"

items

• "Bold"
• "Italic"
• "Underline"
• "Strike"
• "Subscript"
• "Superscript"
• "RemoveFormat"

items

• "NumberedList"
• "BulletedList"
• "Outdent"
• "Indent"
• "Blockquote"
• "CreateDiv"
• "JustifyLeft"
• "JustifyCenter"
• "JustifyRight"
• "JustifyBlock"
• "BidiLtr"
• "BidiRtl"

items

• "Link"
• "Unlink"
• "Anchor"

items

• "CreatePlaceholder"
• "Image"
• "Flash"
• "Table"
• "HorizontalRule"
• "Smiley"
• "SpecialChar"
• "PageBreak"
• "Iframe"
• "InsertPre"

items

• "Styles"
• "Format"
• "Font"
• "FontSize"

items

• "TextColor"
• "BGColor"

items

• "UIColor"
• "Maximize"
• "ShowBlocks"

items

• "button1"
• "button2"
• "button3"
• "oembed"
• "MediaEmbed"

items

• "About"

Answer 3

Simply generate your own configaration in visual CKEditor Toolbar Configurator

An example of generated:

CKEDITOR.editorConfig = function( config ) {
  config.toolbarGroups = [
    { name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
    { name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
    { name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
    { name: 'forms', groups: [ 'forms' ] },
    { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
    { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
    { name: 'links', groups: [ 'links' ] },
    { name: 'insert', groups: [ 'insert' ] },
    { name: 'styles', groups: [ 'styles' ] },
    { name: 'colors', groups: [ 'colors' ] },
    { name: 'tools', groups: [ 'tools' ] },
    { name: 'others', groups: [ 'others' ] },
    { name: 'about', groups: [ 'about' ] }
  ];

  config.removeButtons = 'Form,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,BidiLtr,BidiRtl,Language,Styles,Font,Smiley,CreateDiv,Checkbox,Scayt,NewPage,About';
};

Answer 4

Underline option is available, but by default it's not visible. You need to remove it from below line in config.js file.

config.removeButtons = 'Underline,Subscript,Superscript';