# NGJS Service

angular
  .module('yourMainApp', ['ngjs-email-builder-module'])
  .run(['ngjs', function(ngjs) {}]);

# Configurations

All cofigurations are within config property of ngjs:

angular.module('yourMainApp', ['ngjs-email-builder-module']).run([
  'ngjs',
  function(ngjs) {
    ngjs.config = {};
  }
]);

# config.mjmlPublicKey

• Type: string
• Default: null

MJML Public key

# config.mjmlApplicationId

• Type: string
• Default: null

MJML Application ID

# config.xApiKey

• Type: string
• Default: null

In working process, this key will allow you to access our MJML API Server.

# config.mjmlCompileAdress

• Type: string
• Default: null

Change it if you desire to send all generating requests to another point.

# config.exportHtml

• Type: string
• Default: !process.env.prod

Show/Hide export ready-to-use HTML button.

# config.deleteAllBlocks

• Type: string
• Default: !process.env.prod

Show/Hide delete all blocks button.

# config.trackEvents

• Type: string
• Default: process.env.prod

Send events to Google Analytics, make sure you have Google Analytics tracking code in page.

# Fonts

Now you're able to control all fonts within this editor, call ngjs.fonts to see the whole list:

console.log(ngjs.fonts); // return a SET list

To convert it to a simple array, use es6 spread operator:

console.log([...ngjs.fonts]); // return an array with fonts list

This is the result and default font list as well:

[
  'Palatino Linotype, Book Antiqua, Palatino, serif',
  'Times New Roman, Times, serif',
  'Arial, Helvetica, sans-serif',
  'Arial Black, Gadget, sans-serif',
  'Comic Sans MS, cursive, sans-serif',
  'Impact, Charcoal, sans-serif',
  'Lucida Sans Unicode, Lucida Grande, sans-serif',
  'Tahoma, Geneva, sans-serif',
  'Trebuchet MS, Helvetica, sans-serif',
  'Verdana, Geneva, sans-serif',
  'Courier New, Courier, monospace',
  'Lucida Console, Monaco, monospace'
];

# Add new font

This property is a SET object which contain a list of fonts, check all methods of an es6 SET here, so as you can see, to add new font just call add method:

ngjs.fonts.add('Georgia, serif');

# Delete font

To delete one, call delete method:

ngjs.fonts.delete('Georgia, serif');

# Default Font

When you drag a new block, or create a new email template, this default font will be automatically injected into, check defaultFont property to see your current default font settings:

console.log(ngjs.defaultFont); // return an object

If you haven't change something here, you must see the next object as a result:

{
  family: 'Tahoma, Geneva, sans-serif',
  size: 16,
  weight: 'normal',
  color: '#4d4d4d'
}

If you want to make some changes, let's say - to change default font size, all you have to do is just rewrite this property:

ngjs.defaultFont = { size: 18 };

This will end up to this:

{
  family: 'Tahoma, Geneva, sans-serif',
  size: 18,
  weight: 'normal',
  color: '#4d4d4d'
}

# Font Weights

There's also a way to change default font weights, check fontWeights property! It's also a SET object like Fonts list:

console.log(ngjs.fontWeights); // return a SET list

That's the list by default, if we would run [...ngjs.fontWeights] like in font list:

['bold', 'lighter', 'normal', 300, 600, 900];

There's also an add and delete method:

ngjs.fontWeights.add('initial'); // This will add 'initial' weight to list
ngjs.fontWeights.delete('initial'); // This will delete 'initial' weight from list

NOTE: Make you to add only valid font weights!

# Events

There're three types of events Save, Browse and Delete. To listen them, call on method:

ngjs.on('event', yourCallbackFunction);

# Save

When someone clicks on Save email button, the builder will try to generate an HTML output through MJML, and fire this event:

ngjs.on('save', ({ email, html }) => {
  console.log(email); // this is current email template object
  console.log(html); // this is ready-to-use html template
});

If during this process appear some issues, a notify message will be showen with all errors description.

Consider to save email and html to your database on this event, so when would you want to edit it again, inject it in ngjs-email-builder component through email attribute.

Take a look here to see how to inject a saved email.

Also email contains your id as well. Get more info about custom data here.

# Browse

This event is fired when someone tries to upload an image within builder:

ngjs.on('browse', () => Promise.reject('Disabled in demo!'));

This example is in our demo website.

In order to get things done, your callback always has to return a Promise or just a string. In both cases, the end result has to be an image path.

Here's a Promise example:

ngjs.on('browse', () => {
  return new Promise((resolve, reject) => {
    // Do your stuff to get an image, like open your media manager
    // Once image is selected, call resolve() with selected image path
    return resolve('https://via.placeholder.com/600x300?text=Change+Me');
    // Don't forget to call reject() if there're any issues
  });
});

And here's a String example:

ngjs.on('browse', () => 'https://via.placeholder.com/600x300?text=Change+Me');

But in this case, you'll always return just a single image.

# Delete

If you choosed to have a button which removes all blocks within builder at once, here's an event before doing that:

ngjs.on('delete', email => {
  console.log(email); // this is current email template object
});

It's useful to clear your database if your user deleted all added blocks.

# Text Editor

Text editor is a very important part for this builder. We chosed to Tinymce as our text editor because it's very complex and there're many plugins for it. We tried to make it very customizable and simple to use.

Here's default configuration:

{
  plugins: 'autolink lists link hr paste textcolor directionality',
  toolbar:
    'undo redo | bold italic fontsizeselect forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | link hr | ltr rtl',
  fontsize_formats:
    '8pt 9pt 10pt 11pt 12pt 13pt 14pt 15pt 16pt 18pt 20pt 24pt 28pt 32pt 36pt 40pt 44pt 46pt 50pt',
  menubar: false,
  inline: true,
  theme_url:
    'https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.8.3/themes/modern/theme.min.js'
}

Check this for all available configurations!

To change something, rewrite tinymceOptions property:

ngjs.tinymceOptions = { menubar: true }; // Show tinymce menubar

Of course you can make any changes you want like this, but we have some helpers for you! Take a look below!

# Add Toolbar placeholders

Many times we had requests about how to add custom placeholders, now I'll show you an example about this! Let's say we want to add MailChimp placeholders to our text editor toolbar!

To do that, we'll define a button when tynimce will call setup method:

ngjs.tinymceOptions = {
  setup(editor) {
    editor.addButton('mailchimpMergeTags', {
      type: 'menubutton',
      text: 'Merge Tags',
      icon: false,
      tooltip: 'Merge Tags',
      menu: [
        '*|FNAME|*',
        '*|LNAME|*',
        '*|EMAIL|*',
        '*|LIST:NAME|*',
        '*|LIST:COMPANY|*',
        '*|LIST:SUBSCRIBERS|*',
        '*|USER:COMPANY|*',
        '*|USER:ADDRESS|*',
        '*|USER:PHONE|*',
        '*|MC:DATE|*',
        '*|CURRENT_YEAR|*',
        '*|UNSUB|*',
        '*|UPDATE_PROFILE|*'
      ].map(text => ({
        text,
        onclick() {
          editor.insertContent(text);
        }
      }))
    });
  }
};

Check our demo website to see it in action.

P.S. If you don't understand what's going on here, just copy and replace highlited lines with yours.

As you can see, we defined a mailchimpMergeTags button for using in our text editor, now we have to inject it to toolbar!

Call addTinymceToolbarButton to add a toolbar button:

ngjs.addTinymceToolbarButton('mailchimpMergeTags');

By doing this, addTinymceToolbarButton will put this button at the end of all toolbar buttons. To change the order, add second parameter, index:

ngjs.addTinymceToolbarButton('mailchimpMergeTags', 1);

And finally the last parameter, is how many buttons to remove begins from index! This is useful if you want to remove some existing buttons!

ngjs.addTinymceToolbarButton(null, 1, 1);

This action will remove the second toolbar button group!

# Add plugin

To add a plugin to tinymce, call:

ngjs.addTinymcePlugin('plugin-name');

And add plugin button to toolbar:

ngjs.addTinymceToolbarButton('plugin-name');

For example, let's add code plugin to our toolbar:

ngjs.addTinymcePlugin('code');
ngjs.addTinymceToolbarButton('code');