“Drag and Drop Newsletter Builder” Documentation by “Nextrising Tech” v1.0

“Drag and Drop Newsletter Builder”

Table of Contents

1. Usage
2. How To's
3. How to use plugins
4. With easy structure and different options
5. Events
6. Methods
7. Important Note

A) Usage - top

1. Include CSS:

    	
            <link href="assets/frameworks/foundation-emails/css/app.css" rel="stylesheet" type="text/css" />
            <link href="nlbuilder/newsletterbuilder.css" rel="stylesheet" type="text/css" />
		
    

2. HTML:

    	
            <table class="body" data-made-with-foundation="" style="margin-top:105px">
              <tr>
                <td class="float-center" align="center" valign="top">
                  <center data-parsed="">
                      <table align="center" class="container float-center">
                        <tbody>
                          <tr>
                            <td id="contentarea" class="is-container">
            
                            </td>
                          </tr>
                        </tbody>
                      </table>
                  </center>
                </td>
              </tr>
            </table>
    	
	

3. Include JS:

Extra Blocks for email building using Foundation framework is included (assets/email-blocks/snippetlist.html).

Please set emailMode and absolutePath parameters to true.

    	
        
            <script src="nlbuilder/newsletterbuilder.min.js" type="text/javascript"></script>
            <script src="assets/email-blocks/content-inlined.js" type="text/javascript"></script<
            
            <script type="text/javascript"<
                var builder = new NewsletterBuilder({
                    container: '#contentarea',
                    snippetData: 'assets/email-blocks/snippetlist.html',
                    rowFormat: '<div><table align="center" class="container float-center"><tbody><tr><td><table class="row"><tbody><tr>' +
                      '</tr></tbody></table></td></tr></tbody></table></div>',
                    cellFormat: '<th class="small-12 large-12 columns first last"><table><tbody><tr><th>' +
                      '</th></tr></tbody></table></th>',
                    customTags: [["First Name", "{%first_name%}"],
                      ["Last Name", "{%last_name%}"],
                      ["Email", "{%email%}"]],
                    emailMode: true,
                    absolutePath: true,
                    snippetOpen: true,
                    buttonsMore: ['icon', 'image', '|', 'list', 'font', 'formatPara']
                });
            </script>
		
    

More about Foundation for Email framework: http://foundation.zurb.com/emails/getting-started.html

4. To get HTML:

    	
             var html = builder.html();
        
    

B) How To's - top

SAVING EMBEDED BASE64 IMAGE AS FILE (IMPORTANT!)

To save image files on the server you will need server side handler. We provide PHP example.

Use saveImages() method to save all embedded base64 images. Here is an example:

        	
            
        builder.saveImages('saveimage.php', function(){
        
            console.log('images saved');
        
            // Then you can save the content here:
        
            var html = builder.html(); // Get content
        
            // Submit the html to the server for saving. For example, if you're using html form:
            
            document.querySelector('#inpHtml').value = html;
            document.querySelector('#btnPost').click();
        
        });
        
        
        Include the form for saving:
        
        <form id="form1" method="post" style="display:none">
            <input type="hidden" id="inpHtml" name="inpHtml" />
            <input type="submit" id="btnPost" value="submit" />
        </form>
        
        	
        

Programmatically add editable area

If your application wants to add an editable container programmatically, after adding the container, call applyBehavior() method:

        	
	builder.applyBehavior();
        	
        

This will make the new container become editable.

Include Language File

With language file you can translate NewsletterBuilder.js interface into another language. To include the language file:

        	
	<script src="nlbuilder/lang/en.js" type="text/javascript"></script>

        Here is the language file content as seen on lang/en.js:
        
            var _txt = new Array();
            _txt['Bold'] = 'Bold';
            _txt['Italic'] = 'Italic';
            ...
			
		

You can create your own language file (by copying/modifying the lang/en.js) and include it on the page where newsletterbuilder.js is included.

This will automatically translate the NewsletterBuilder.js interface.

C) How to use plugins - top

You need to use plugin parameter at the time of initialization 'plugins' parameter:

        	
        <script>
            var builder = new NewsletterBuilder({
                container: '.container',
                plugins: ['preview','wordcount', 'buttoneditor']
            });
        </script>
        	
		

D) With easy structure and different options - top

                                        
        var builder = new NewsletterBuilder({
            customTags: [["Contact Form", "{%CONTACT_FORM%}"],
                ["My Plugin", "{%MY_PLUGIN%}"]],
            ...
        });
                                        
                                    

                                        
        var builder = new NewsletterBuilder({
            container: '.container',
            buttonsMore: []
        });
                                        
                                    

                                        
        var builder = new NewsletterBuilder({
            container: '.container',
            plugins: ['preview','wordcount', 'buttoneditor']
        });
                                        
                                    

                                	
        [
            [1,"Logo"],
            [14,"Call to Action"],
            [2,"Title"],
            [3,"Title, Subtitle"],
            [4,"Info, Title"],
            [7,"Paragraph"],
            [6,"Heading"],
            [8,"Buttons"],
            [9,"Callouts"],
            [10,"Images + Caption"],
            [12,"Images"],
            [13,"List"],
            [15,"Pricing"],
            [16,"Quotes"],
            [17,"Profile"],
            [18,"Contact Info"],
            [19,"Footer"],
            [20,"Separator"]
        ]
                                	
								

E) Events - top

onRender

Triggered when new snippet added (or content changed). If there are custom extensions/plugins within the content, re-init the plugins here.

onChange

Triggered when content changed.

onImageBrowseClick

Triggered when image browse icon is clicked.

onImageSettingClick

Triggered when image link icon is clicked.

onImageSelectClick

Triggered when custom image select button is clicked.
If onImageSelectClick event is used, custom image select button will be displayed on the image link dialog.

onFileSelectClick

Triggered when custom file select button is clicked.
If onFileSelectClick event is used, custom file select button will be displayed on the link dialog.

onAdd(html)

        	
Triggered when a snippet (block) is added or dropped into content.
You can use it to modify the snippet's HTML before it is added or dropped into content. Set the modified html as a return, 

for example:

                
    var builder = new NewsletterBuilder({
        container: '.container',
        onAdd: function (html) {
            html = html.replace('{custom tag}', 'your content');
            return html;
        }
    });
			
		

onContentClick(event)

Triggered when content is clicked.

F) Methods - top

html(element)

To get HTML
Parameter: element (optional), to specify specific instance of editable area.

saveImages(handler, callback)

        	
To call server side handler to save all embedded base64 images to the server.

Example:

        
    builder.saveImages('saveimage.php', function(){ 
        console.log('image saving done!');
    });
			
		

viewHtml()

To view HTML source dialog

viewConfig()

To view preferences (editor configuration) dialog

loadHtml(html)

To load HTML at runtime.

viewSnippets()

To open snippet selection.

destroy()

To disable/destroy the plugin.

pasteHtmlAtCaret(html)

To insert HTML at cursor position.

undo()

Perform undo.

redo()

Perform redo.

G) Important Note - top

Custom Development is beyond of our support scope.

Our support doesn't cover custom integration into users' applications. It is users' responsibility.

Once you get the HTML content, then it is more of to user's custom application (eg. posting it to the server for saving into a file, database, etc).

Server side implementation is beyond of our support scope.

Once again, thank you so much for purchasing Drag and Drop Newsletter Builder. As I said at the beginning, I'd be glad to help you if you have any questions relating to Drag and Drop Newsletter Builder. No guarantees, but I'll do my best to assist. If you have a more general question relating to the web application on CodeCanyon, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Nextrising Tech

Go To Table of Contents