Show: Inherited Protected Private Deprecated

# ButtonImage Class

Defined in: `src/ui/react/src/components/buttons/button-image.jsx:4`

The ButtonImage class inserts an image to the content.

## Index

### Methods

- _onInputChange
- handleClick
- render

### Properties

- editor
- key static
- label
- tabIndex

### Events

- imageAdd

## Methods

### `_onInputChange`

() protected

Defined in `src/ui/react/src/components/buttons/button-image.jsx:77`

On input change, reads the chosen file and creates an img element with src the image data as Data URI. Then, fires an imageAdd via CKEditor's message system. The passed params will be:

- `el` - the created img element
- `file` - the original image file from the input element

### `handleClick`

(

- `event`

)

Defined in `src/ui/react/src/components/buttons/button-image.jsx:67`

Simulates click on the input element. This will open browser's native file open dialog.

#### Parameters:

- `event` SyntheticEvent

  The received click event on the button.

### `render`

() Object

Defined in `src/ui/react/src/components/buttons/button-image.jsx:47`

Lifecycle. Renders the UI of the button.

#### Returns:

Object:

The content which should be rendered.

## Properties

### `editor`

Object

Defined in `src/ui/react/src/components/buttons/button-image.jsx:12`

The editor instance where the component is being used.

### `key`

String static

Defined in `src/ui/react/src/components/buttons/button-image.jsx:37`

The name which will be used as an alias of the button in the configuration.

Default: image

### `label`

String

Defined in `src/ui/react/src/components/buttons/button-image.jsx:19`

The label that should be used for accessibility purposes.

### `tabIndex`

Number

Defined in `src/ui/react/src/components/buttons/button-image.jsx:26`

The tabIndex of the button in its toolbar current state. A value other than -1 means that the button has focus and is the active element.

## Events

### `imageAdd`

Defined in `src/ui/react/src/components/buttons/button-image.jsx:121`

Fired when an image file is added as an element to the editor.

#### Event Payload:

- `el` CKEDITOR.dom.element

  The created image with src as Data URI.