# Button Generator

This plugin allows you to generate buttons in the visual editor with various display styles: gradient, shadow, color, fonts, and much more. The plugin also allows you to edit existing buttons on the page.

## Usage

The plugin adds a "Button generator" button to the editor toolbar. When you click on this button, a dialog box with button settings opens.

You can also edit existing buttons by double-clicking on them in the editor.

## Button Configuration Options

### Text Options

- **text** - button text
- **className** - CSS class of the button
- **href** - URL for the link (if the button is a link)
- **fontFamily** - font family (Arial, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana)
- **fontSize** - font size (from 8 to 28 pixels)
- **fontWeight** - bold font (true/false)
- **fontItalic** - italic font (true/false)
- **fontColor** - text color

### Dimensions

- **paddingX** - horizontal padding (from 0 to 76 pixels)
- **paddingY** - vertical padding (from 0 to 32 pixels)

### Borders

- **borderRadius** - corner radius (from 0 to 42 pixels)
- **borderSize** - border size (from 0 to 12 pixels)
- **borderColor** - border color

### Background

- **solid** - solid background or gradient (true/false)
- **bgStart** - starting background/gradient color
- **bgEnd** - ending gradient color
- **previewBgColor** - preview background color

### Box Shadow

- **boxShadow** - enable/disable box shadow (true/false)
- **boxShadowOffsetX** - horizontal shadow offset (from -50 to 50 pixels)
- **boxShadowOffsetY** - vertical shadow offset (from -50 to 50 pixels)
- **boxShadowBlurRadius** - shadow blur radius (from 0 to 50 pixels)
- **boxShadowSpreadRadius** - shadow spread radius (from -50 to 50 pixels)
- **boxShadowColor** - shadow color
- **boxShadowInset** - inset shadow (true/false)

### Text Shadow

- **textShadow** - enable/disable text shadow (true/false)
- **textShadowOffsetX** - horizontal text shadow offset (from -50 to 50 pixels)
- **textShadowOffsetY** - vertical text shadow offset (from -50 to 50 pixels)
- **textShadowBlurRadius** - text shadow blur radius (from 0 to 50 pixels)
- **textShadowColor** - text shadow color

## Examples

### Creating a Simple Button

```js
const jodit = Jodit.make('#editor');

// Insert button via API
jodit.events.fire('toggleButtonGenerator');
```

### Creating a Button with Preset Styles

```js
const jodit = Jodit.make('#editor');

// Create button element
const button = jodit.createInside.element('button');
button.innerText = 'My Button';

// Apply styles
const styles = {
  text: 'My Button',
  bgStart: '#44c767',
  bgEnd: '#5cbf2a',
  solid: true,
  borderColor: '#18ab29',
  borderRadius: 28,
  borderSize: 1,
  fontColor: '#ffffff',
  fontFamily: 'Arial',
  fontSize: 17,
  paddingX: 31,
  paddingY: 16,
  textShadow: true,
  textShadowColor: '#2f6627',
  textShadowOffsetX: 0,
  textShadowOffsetY: 1,
  textShadowBlurRadius: 0
};

// Insert button into editor
jodit.s.insertNode(button);

// Open button editing dialog
jodit.events.fire('toggleButtonGenerator', button);
```

### Creating a Link Button

```js
const jodit = Jodit.make('#editor');

// Create link element
const link = jodit.createInside.element('a');
link.innerText = 'Go to Website';
link.href = 'https://example.com';

// Apply styles to display as a button
const styles = {
  text: 'Go to Website',
  href: 'https://example.com',
  bgStart: '#3498db',
  bgEnd: '#2980b9',
  solid: false, // Use gradient
  borderColor: '#2980b9',
  borderRadius: 5,
  borderSize: 1,
  fontColor: '#ffffff',
  fontFamily: 'Arial',
  fontSize: 16,
  fontWeight: true, // Bold text
  paddingX: 20,
  paddingY: 10,
  boxShadow: true,
  boxShadowColor: 'rgba(0,0,0,0.3)',
  boxShadowOffsetX: 0,
  boxShadowOffsetY: 2,
  boxShadowBlurRadius: 5,
  boxShadowSpreadRadius: 0
};

// Insert link into editor
jodit.s.insertNode(link);

// Open button editing dialog
jodit.events.fire('toggleButtonGenerator', link);
```

### Programmatically Creating a Button with Shadow

```js
const jodit = Jodit.make('#editor');

// Create button element
const button = jodit.createInside.element('button');
button.innerText = 'Button with Shadow';

// Apply styles
const styles = {
  text: 'Button with Shadow',
  bgStart: '#f39c12',
  bgEnd: '#e67e22',
  solid: false,
  borderColor: '#e67e22',
  borderRadius: 10,
  borderSize: 1,
  fontColor: '#ffffff',
  fontFamily: 'Georgia',
  fontSize: 18,
  paddingX: 25,
  paddingY: 15,
  boxShadow: true,
  boxShadowColor: 'rgba(0,0,0,0.5)',
  boxShadowOffsetX: 0,
  boxShadowOffsetY: 4,
  boxShadowBlurRadius: 8,
  boxShadowSpreadRadius: 0,
  boxShadowInset: false
};

// Insert button into editor
jodit.s.insertNode(button);

// Open button editing dialog
jodit.events.fire('toggleButtonGenerator', button);
```

## Events

### toggleButtonGenerator

Opens the button generator dialog box. If a button or link element is passed, that element will be edited.

```js
jodit.events.fire('toggleButtonGenerator', buttonElement);
```

### isButtonGeneratorOpened

Returns true if the button generator dialog box is open.

```js
const isOpened = jodit.events.fire('isButtonGeneratorOpened');