alloy editor
  • Docs
  • Updates
  • Develop
    • About
    • Build it
    • Create
    • Create Buttons
    • Create Skins
    • Create Toolbars
    • Create entirely new UI
  • Use
    • Basic use
    • How to use it?
    • Creating a React component
    • How to use CKEditor Plugins?
    • Editor Configuration
    • Toolbar configuration
    • Button configuration
    • Read only mode
    • Skins
  • Features
    • Quote
    • Bold
    • Code
    • Horizontal Line
    • Heading 1
    • Image Alignment - Center
    • Heading 2
    • Image
    • Image Alignment - Left
    • Image Alignment - Right
    • Indent and outdent block content
    • Link
    • Link AutoComplete
    • Italic
    • Text Alignment - Centered
    • Text Alignment - Left
    • Text Alignment - Justified
    • Camera
    • Strike
    • Remove Format
    • Text Alignment - Right
    • Styles
    • Superscript
    • Subscript
    • Table
    • Table - Cells
    • Table - Columns
    • Lists (Numbered)
    • Table - Heading
    • Table - Remove
    • Table - Rows
    • Underline
    • Twitter
    • Lists (Bulleted)

Button configuration

You can pass configuration attributes to a button to change its default behavior, without affecting its position in the toolbar. You can combine this with a custom toolbar configuration to have maximum flexibility in your configuration.

Passing configuration options to the buttons

Buttons are configured via a common buttonCfg property, like this:

var editor = AlloyEditor.editable('editable', {
	buttonCfg: {
	    bold: {
	        tabIndex: 1
	    }
	}
});

The example above creates a configuration for a button named bold with a tabIndex property set to 1 (default 0). You must pass the button's static key property (the button's name) in the configuration.

Liferay.com