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 APIjodit.events.fire('toggleButtonGenerator');
Copy

Creating a Button with Preset Styles

const jodit =Jodit.make('#editor');
// Create button elementconst button = jodit.createInside.element('button');button.innerText='My Button';
// Apply stylesconst 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 editorjodit.s.insertNode(button);
// Open button editing dialogjodit.events.fire('toggleButtonGenerator', button);
Copy

Creating a Link Button

const jodit =Jodit.make('#editor');
// Create link elementconst link = jodit.createInside.element('a');link.innerText='Go to Website';link.href='https://example.com';
// Apply styles to display as a buttonconst styles ={text:'Go to Website',href:'https://example.com',bgStart:'#3498db',bgEnd:'#2980b9',solid:false,// Use gradientborderColor:'#2980b9',borderRadius:5,borderSize:1,fontColor:'#ffffff',fontFamily:'Arial',fontSize:16,fontWeight:true,// Bold textpaddingX:20,paddingY:10,boxShadow:true,boxShadowColor:'rgba(0,0,0,0.3)',boxShadowOffsetX:0,boxShadowOffsetY:2,boxShadowBlurRadius:5,boxShadowSpreadRadius:0};
// Insert link into editorjodit.s.insertNode(link);
// Open button editing dialogjodit.events.fire('toggleButtonGenerator', link);
Copy

Programmatically Creating a Button with Shadow

const jodit =Jodit.make('#editor');
// Create button elementconst button = jodit.createInside.element('button');button.innerText='Button with Shadow';
// Apply stylesconst 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 editorjodit.s.insertNode(button);
// Open button editing dialogjodit.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

Full demo including Premium Plugins!

These examples display all of the plugins available with Jodit Editor PRO/OEM version.

Jodit Editor