CODEWITHSUNDEEP
ckeditor
Rob N
Rob N

Reputation: 16399

What toolbar buttons are available in CKEditor 4?

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.

Upvotes: 47

Views: 39195

Answers (4)

Reinmar
Reinmar

Reputation: 22023

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.

Upvotes: 34

Kᴏɴsᴛᴀɴᴛɪɴ Sʜɪʟᴏᴠ
Kᴏɴsᴛᴀɴᴛɪɴ Sʜɪʟᴏᴠ

Reputation: 13056

Simply generate your own configaration in visual CKEditor Toolbar Configurator

Generated an example:

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

enter image description here

Upvotes: 7

Shomz
Shomz

Reputation: 37701

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"

Upvotes: 40

R Sun
R Sun

Reputation: 1671

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

Upvotes: 3

Related Questions