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

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

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

Creating a Button with Preset Styles

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);
Copy

Creating a Link Button

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);
Copy

Programmatically Creating a Button with Shadow

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);
Copy

Events

toggleButtonGenerator

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

jodit.events.fire('toggleButtonGenerator', buttonElement);
Copy

isButtonGeneratorOpened

Returns true if the button generator dialog box is open.

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