This is may help you.
<div class='your selector'></div>
$('.your selector').emailBuilder({
elementJsonUrl: 'elements.json',
langJsonUrl: 'lang.json',
lang: 'en',
loading_color1: '#3B7694',
loading_color2: '#09181F',
showLoading: true,
blankPageHtml: '',
loadPageHtml: '',
showContextMenu: true,
showContextMenu_FontFamily: true,
showContextMenu_FontSize: true,
showContextMenu_Bold: true,
showContextMenu_Italic: true,
showContextMenu_Underline: true,
showContextMenu_Strikethrough: true,
showContextMenu_Hyperlink: true,
showElementsTab: true,
showPropertyTab: true,
showCollapseMenu: true,
showBlankPageButton: true,
showCollapseMenuinBottom: true,
showSettingsBar: true,
showSettingsPreview: true,
showSettingsExport: true,
showSettingsSendMail: true,
showSettingsSave: true,
showSettingsLoadTemplate: true,
showMobileView: true,
showRowMoveButton: true,
showRowRemoveButton: true,
showRowDuplicateButton: true,
showRowCodeEditorButton: true,
onSettingsPreviewButtonClick: function(e) {},
onSettingsExportButtonClick: function(e) {},
onBeforeSettingsSaveButtonClick: function(e) {},
onSettingsSaveButtonClick: function(e) {},
onBeforeSettingsLoadTemplateButtonClick: function(e) {},
onSettingsSendMailButtonClick: function(e) {},
onBeforeChangeImageClick: function(e) {},
onBeforePopupSelectImageButtonClick: function(e) {},
onBeforePopupSelectTemplateButtonClick: function(e) {},
onPopupSaveButtonClick: function(e) {},
onPopupSendMailButtonClick: function(e) {},
onPopupUploadImageButtonClick: function(e) {},
onBeforeRowRemoveButtonClick: function(e) {},
onAfterRowRemoveButtonClick: function(e) {},
onBeforeRowDuplicateButtonClick: function(e) {},
onAfterRowDuplicateButtonClick: function(e) {},
onBeforeRowEditorButtonClick: function(e) {},
onAfterRowEditorButtonClick: function(e) {},
onBeforeShowingEditorPopup: function(e) {},
onAfterLoad:function(e) {}
}});
| Option | Description | Values | Default |
|---|---|---|---|
| elementJsonUrl | Json file directory include which elements want to show in email builder | String | elements.json |
| langJsonUrl |
Json file directory include which languages supported.
If you want ,you can add any language very easily. |
String | lang.json |
| lang | Change builder language . en | fr | de | ru | tr . | String | 'en' |
| loading_color1 | In the loading has 2 colors.This option change loading color 1 | String | #CA1C21 |
| loading_color2 | In the loading has 2 colors.This option change loading color 2 | String | #E7E7E7 |
| showLoading | You can show loading when page loading | true | false | true |
| blankPageHtml | Blank page html source. when users want to create blank page,they see this html | String | null |
| loadPageHtml | When page loading you can load your template from database or you can show any html into editor | String | null |
| showContextMenu | Show or hide context menu in editor | true | false | true |
| showContextMenu_FontFamily | Show or hide font family option context menu in editor | true | false | true |
| showContextMenu_FontSize | Show or hide font size option context menu in editor | true | false | true |
| showContextMenu_Bold | Show or hide bold option context menu in editor | true | false | true |
| showContextMenu_Italic | Show or hide italic option context menu in editor | true | false | true |
| showContextMenu_Underline | Show or hide underline option context menu in editor | true | false | true |
| showContextMenu_Strikethrough | Show or hide strikethrough option context menu in editor | true | false | true |
| showContextMenu_Hyperlink | Show or hide hyperlink option context menu in editor | true | false | true |
| showElementsTab | Show or hide elements tab in left menu | true | false | true |
| showPropertyTab | Show or hide property tab in left menu | true | false | true |
| showCollapseMenu | Show or hide 'collapse menu' button in left menu | true | false | true |
| showBlankPageButton | Show or hide 'blank page' button in left menu | true | false | true |
| showCollapseMenuinBottom | Show or hide 'collapse menu' button bottom or above | true | false | true |
| showSettingsBar | Show or hide settings bar | true | false | true |
| showSettingsPreview | Show or hide 'Preview' button in settings bar | true | false | true |
| showSettingsExport | Show or hide 'Export' button in settings bar | true | false | true |
| showSettingsSendMail | Show or hide 'Send Mail' button in settings bar | true | false | true |
| showSettingsSave | Show or hide 'Save' button in settings bar | true | false | true |
| showSettingsLoadTemplate | Show or hide 'Load Template' button in settings bar | true | false | true |
| showMobileView | Show or hide 'Mobile view' button in settings bar | true | false | true |
| showRowMoveButton | Show or hide 'Move' button in actions row item | true | false | true |
| showRowRemoveButton | Show or hide 'Remove' button in actions row item | true | false | true |
| showRowDuplicateButton | Show or hide 'Duplicate' button in actions row item | true | false | true |
| showRowCodeEditorButton | Show or hide 'Code Editor' button in actions row item | true | false | true |
| onSettingsPreviewButtonClick | Settings preview button click event | undefined | function (e){} |
| onSettingsExportButtonClick | Settings export button click event | undefined | function (e){} |
| onBeforeSettingsSaveButtonClick | Settings before save button click event | undefined | function (e){} |
| onSettingsSaveButtonClick | Settings save button click event | undefined | function (e){} |
| onBeforeSettingsLoadTemplateButtonClick | Settings before load template button click event | undefined | function (e){} |
| onSettingsSendMailButtonClick | Settings send mail button click event | undefined | function (e){} |
| onBeforeChangeImageClick | Before 'change image' click event | undefined | function (e){} |
| onBeforePopupSelectImageButtonClick | Before save button click event in 'select image' popup | undefined | function (e){} |
| onBeforePopupSelectTemplateButtonClick | Before select template button click event in 'load template' popup | undefined | function (e){} |
| onPopupSaveButtonClick | Save button click event in 'Save template' popup | undefined | function (e){} |
| onPopupSendMailButtonClick | 'Send Email' click event in 'Send Mail' popup | undefined | function (e){} |
| onPopupUploadImageButtonClick | 'Upload' button click for upload image in 'select image' popup | undefined | function (e){} |
| onBeforeRowRemoveButtonClick | Before clicking 'Remove' button in element settings | undefined | function (e){} |
| onAfterRowRemoveButtonClick | After clicking 'Remove' button in element settings | undefined | function (e){} |
| onBeforeRowDuplicateButtonClick | Before clicking 'Duplicate' button in element settings | undefined | function (e){} |
| onAfterRowDuplicateButtonClick | After clicking 'Duplicate' button in element settings | undefined | function (e){} |
| onBeforeRowEditorButtonClick | Before clicking 'Code editor' button in element settings | undefined | function (e){} |
| onAfterRowEditorButtonClick | After clicking 'Code editor' button in element settings | undefined | function (e){} |
| onBeforeShowingEditorPopup | Before, show code editor for edit source any elemnt of template | undefined | function (e){} |
| onAfterLoad | After page loading event | undefined | function (e){} |
| onElementDragStart | When element drag start event | undefined | function (e){} |
| onElementDragFinished | Element drag finished event | undefined | function (e,contentHtml){} |
| onTemplateDeleteButtonClick | 'Delete template' click event | undefined | function (e,dataId,parent){} |
$('.bal-editor-demo').emailBuilder({
onBeforeRowDuplicateButtonClick: function(e) {
console.log('onBeforeRowDuplicateButtonClick html');
e.preventDefault(); // return false;
}
});
var _builder= $('.bal-editor-demo').emailBuilder({ });
| Name | Description | Return | Example |
|---|---|---|---|
| setElementJsonUrl(value) | Set elements json file url, include which elements want to show in email builder | undefined |
|
| setLang(value) | Chnage language builder (en | fr | de | ru | tr ). | undefined |
|
| setLangJsonUrl(value) | Set json file url include which supported languages .If you want ,you can add any language very easily. | undefined |
|
| setBlankPageHtml(value) | Set blank page html source. when users want to create blank page,they see this html | undefined |
|
| setLoadPageHtml(value) | Set html when page loading you can load your template from database or you can show any html into editor | undefined |
|
| setShowContextMenu(value) | Show or hide context menu in editor | undefined |
|
| setShowContextMenu_FontFamily(value) | Show or hide font family option context menu in editor | undefined |
|
| setShowContextMenu_FontSize(value) | Show or hide font size option context menu in editor | undefined |
|
| setShowContextMenu_Bold(value) | Show or hide bold option context menu in editor | undefined |
|
| setShowContextMenu_Italic(value) | Show or hide italic option context menu in editor | undefined |
|
| setShowContextMenu_Underline(value) | Show or hide underline option context menu in editor | undefined |
|
| setShowContextMenu_Strikethrough(value) | Show or hide strikethrough option context menu in editor | undefined |
|
| setShowContextMenu_Hyperlink(value) | Show or hide hyperlink option context menu in editor | undefined |
|
| setShowElementsTab(value) | Show or hide elements tab in left menu | undefined |
|
| setShowPropertyTab(value) | Show or hide property tab in left menu | undefined |
|
| setShowCollapseMenu(value) | Show or hide 'collapse menu' button in left menu | undefined |
|
| setShowBlankPageButton(value) | Show or hide 'blank page' button in left menu | undefined |
|
| setShowCollapseMenuinBottom(value) | Show or hide 'collapse menu' button bottom or above | undefined |
|
| setShowSettingsBar(value) | Set value show or hide settings bar | undefined |
|
| setShowSettingsPreview(value) | Set value show or hide 'Preview' button in settings bar | undefined |
|
| setShowSettingsExport(value) | Set value show or hide 'Export' button in settings bar | undefined |
|
| setShowSettingsSendMail(value) | Set value show or hide 'Send Mail' button in settings bar | undefined |
|
| setShowSettingsSave(value) | Set value show or hide 'Save' button in settings bar | undefined |
|
| setShowSettingsLoadTemplate(value) | Set value show or hide 'Load Template' button in settings bar | undefined |
|
| setShowRowMoveButton(value) | Set value show or hide 'Move' button in actions row item | undefined |
|
| setShowRowRemoveButton(value) | Set value show or hide 'Remove' button in actions row item | undefined |
|
| setShowRowDuplicateButton(value) | Set value show or hide 'Duplicate' button in actions row item | undefined |
|
| setShowRowCodeEditorButton(value) | Set value show or hide 'Code Editor' button in actions row item | undefined |
|
| init() | Init email builder any time | undefined |
|
| setSettingsPreviewButtonClick(function) | Set settings preview button click event | undefined |
|
| setSettingsExportButtonClick(function) | Set Settings export button click event | undefined |
|
| setBeforeSettingsSaveButtonClick(function) | Set Settings before save button click event | undefined |
|
| setSettingsSaveButtonClick(function) | Set Settings save button click event | undefined |
|
| setBeforeSettingsLoadTemplateButtonClick(function) | Set Settings before load template button click event | undefined |
|
| setSettingsSendMailButtonClick(function) | Set Settings send mail button click event | undefined |
|
| setBeforeChangeImageClick(function) | Set Before 'change image' click event | undefined |
|
| setBeforePopupSelectImageButtonClick(function) | Set Before save button click event in 'select image' popup | undefined |
|
| setPopupSaveButtonClick(function) | Set Save button click event in 'Save template' popup | undefined |
|
| setBeforePopupSelectTemplateButtonClick(function) | Set Before select template button click event in 'load template' popup | undefined |
|
| setPopupUploadImageButtonClick(function) | Set 'Upload' button click for upload image in 'select image' popup | undefined |
|
| setBeforeRowRemoveButtonClick(function) | Set Before clicking 'Remove' button in element settings | undefined |
|
| setAfterRowRemoveButtonClick(function) | Set After clicking 'Remove' button in element settings | undefined |
|
| setBeforeRowDuplicateButtonClick(function) | Set Before clicking 'Duplicate' button in element settings | undefined |
|
| setAfterRowDuplicateButtonClick(function) | Set After clicking 'Duplicate' button in element settings | undefined |
|
| setBeforeRowEditorButtonClick(function) | Set Before clicking 'Code editor' button in element settings | undefined |
|
| setAfterRowEditorButtonClick(function) | Set After clicking 'Code editor' button in element settings | undefined |
|
| setBeforeShowingEditorPopup(function) | Set Before, show code editor for edit source any elemnt of template | undefined |
|
| setAfterLoad(function) | Set After page loading event | undefined |
|
| getContentHtml() | Get created email template | Html |
|
| makeSortable() | After loading html ,you can call this function for make drag drop | undefined |
|
Firstly you should declare below variable for use API Methods,after this you can call any method very easily
var _builder= $('.bal-editor-demo').emailBuilder();
_builder.getContentHtml();
_builder.setAfterLoad(function(){
console.log('setAfterLoad function');
});
_builder.makeSortable();