@innovastudio/contentbox

ContentBox.js

ContentBox.js is a web page designer. It uses ContentBuilder.js as its HTML editor with added features for page designing. You can use it to create your own CMS or online site builder.

Getting Started

Include the ContentBuilder css files:

<link href="assets/minimalist-blocks/content.css" rel="stylesheet" type="text/css" /> <!-- for snippets -->
<link href="contentbuilder/contentbuilder.css" rel="stylesheet" type="text/css" />

and the main ContentBox css file:

<link href="contentbox/contentbox.css" rel="stylesheet" type="text/css" />

Install as Web Library

Include the js file:

<script src="contentbox/contentbox.min.js" type="text/javascript"></script>

Or Install with NPM

npm install @innovastudio/contentbox

Then import into your project:

import ContentBox from '@innovastudio/contentbox';

Additional Includes for Viewing Content

For viewing content, additional includes are also needed.

On the head section:

<link href="box/box.css" rel="stylesheet" type="text/css" />

And before the end of body tag:

<script src="box/box.js" type="text/javascript"></script>

In the previous version, ContentBox.js is implemented as a JQuery plugin. Now in version 5, it is rewritten in pure Javascript. However, ContentBox.js includes predesigned Sliders (using Slick slider) that require JQuery to run. So we need to add the JQuery include:

<script src="path-to/jquery.min.js"></script> 

Usage

 <div class="is-wrapper">
 </div>

const builder = new ContentBox({
    wrapper: '.is-wrapper',
});

To get the edited content:

1. Get the HTML

let html = builder.html();

1. Get the styles

let mainCss = builder.mainCss(); // Returns the default typography style for the page.
let sectioncss = builder.sectioncss(); // Returns the typography styles for specific sections on the page

Then you can do anything with the content, for example, posting it to the server for saving, etc.

Examples (HTML, PHP, React, Vue)

ContentBox.js is written in pure Javascript (ES6) so you can use it in most situations. Sample use in simple HTML, PHP, React and Vue projects are included.

React and Vue project examples are provided in separate downloads in the user area.

Folder Structure

• public/
  • assets/
  • box/
  • contentbox/
  • contentbuilder/
  • uploads/
  • example.html (HTML example)
  • example.php (PHP example)
  • example-bootstrap.html (using Bootstrap framework)
  • example-foundation.html (using Foundation framework)
• src/
  • contentbox/ (Only provided in Source Code package)
  • scss/ (Only provided in Source Code package)
• docs/
• README.md (Documentation)
• ...

Predesigned Sections (Templates)

To start building a page, you can click the (+) button on the top left sidebar. This will opens a selection of predesigned sections that you can add into your page.

The predesigned section files are located in the folder:

assets/designs/

It contains:

• basic.js (a JSON file containing a list of simple designs)
• examples.js (a JSON file containing a list of ready made designs)
• images (contains assets for the designs)
• preview (contains design thumbnails)

You can configure the file location by setting the designUrl1, designUrl2 and designPath parameters:

const builder = new ContentBox({
    wrapper: '.is-wrapper',
    designUrl1: 'assets/designs/basic.js',
    designUrl2: 'assets/designs/examples.js',
    designPath: 'assets/designs/',
});

In case of a different assets location, path adjustment may be needed. Here you can use the designPathReplace parameter.

Example:

const builder = new ContentBox({
    wrapper: '.is-wrapper',
    designUrl1: 'https://path-to/assets/designs/basic.js',
    designUrl2: 'https://path-to/assets/designs/examples.js',
    designPath: 'https://path-to/assets/designs/',
    designPathReplace: ['assets/designs/', 'https://path-to/assets/designs/'], // replace the default path to the new location
});

In this example, the default location is changed to https://path-to/assets/designs/

With this, you can place all the assets in a separate server or different host (e.g. from a CDN).

Snippets

Snippets are predesigned blocks that you can add or drag & drop into your content.

Snippet selection can be opened from the left sidebar.

Snippet files are located in the folder:

assets/minimalist-blocks/

It contains:

• content.js (snippets JSON file)
• content.css (snippet css file)
• images (contains assets for the snippets)
• preview (contains snippet thumbnails)

You can configure the snippets location by setting the snippetUrl and snippetPath parameters:

const builder = new ContentBox({
    wrapper: '.is-wrapper',
    snippetUrl: 'assets/minimalist-blocks/content.js', // Snippet file
    snippetPath: 'assets/minimalist-blocks/',  // Location of snippets' assets
});

In case of a different location, path adjustment may be needed. Here you can use the snippetPathReplace parameter.

Example:

const builder = new ContentBox({
    wrapper: '.is-wrapper',
    snippetUrl: 'https://path-to/assets/minimalist-blocks/content.js', // Snippet file
    snippetPath: 'https://path-to/assets/minimalist-blocks/',  // Location of snippets' assets
    snippetPathReplace: ['assets/', 'https://path-to/assets/'], // replace the default path to the new location
});

In this example, the default location is changed to https://path-to/assets/minimalist-blocks/

With this, you can place all the snippet assets in a separate server or different host (e.g. from a CDN).

Typography Styles

A selection of typography styles is provided for you to choose to format your page. The selection can be opened from the left sidebar.

The style can be used to format the entire page or just a specific section or box area of your page.

If the page has one or more sections (or boxes) that have their own typography style, a modal dialog is opened for you to choose to replace all the sections' styles or keep the sections' style and format only the unstyled sections.

To apply the typography style for a specific section or box area, open the Box Settings dialog, select 'Text' tab and click 'Change Style'.

This will re-open the typography selection and your selection will be applied to the chosen box area only.

Typography style files are located in the folder:

assets/styles/

It contains all the css needed and its preview images. You can change its location using the contentStylePath parameter.

const builder = new ContentBox({
    wrapper: '.is-wrapper',
    contentStylePath: 'assets/styles/',
});

Language File

With the Language file, you can translate the ContentBox.js interface into another language.

The language file is located in:

• contentbuilder/lang/en.js

To enable the language file, you need to add the file before including ContentBox.js:

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

Here is the language file content as seen on en.js:

var _txt = new Array();
_txt['Bold'] = 'Bold';
_txt['Italic'] = 'Italic';

You can create your own language file by copying/modifying this file.

Adding Custon Buttons to the Sidebar

To add custom buttons to the sidebar, use addButton method.

Here is an example of adding Undo & Redo button. For undo and redo operation, we call the undo() and redo() methods.

builder.addButton({ 
    'pos': 2, // button position
    'title': 'Undo', // title
    'html': '<svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#ion-ios-undo"></use></svg>', // icon
    'onClick': ()=>{
        builder.undo();
    }
});

builder.addButton({ 
    'pos': 3, // button position
    'title': 'Redo', // title
    'html': '<svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#ion-ios-redo"></use></svg>', // icon
    'onClick': ()=>{
        builder.redo();
    }
});

The addButton method has 4 parameters:

• pos (position of the button)
• title
• html (to specify the icon for the button)
• onClick

Here is another example for adding a Preview button. If clicked, the button will open a separate page (preview.html) that we use to preview our edited page as in production.

builder.addButton({ 
    'pos': 5, 
    'title': 'Preview', 
    'html': '<svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#ion-eye"></use></svg>', 
    'onClick': ()=>{

        var html = builder.html();
        localStorage.setItem('preview-html', html); 
        var mainCss = builder.mainCss(); 
        localStorage.setItem('preview-maincss', mainCss); 
        var sectionCss = builder.sectionCss();
        localStorage.setItem('preview-sectioncss', sectionCss);

        window.open('/preview.html', '_blank').focus();
    }
});

Here we get the content and its styles using html(), mainCss(), and sectionCss() methods and save them into the browser's local storage. The content then will be used in the preview.html for viewing.

Embedding Box Cover (Background) Image

In Box Settings, you can specify box's cover or background image.

However, for quick upload an image without opening the Box Settings, you can click the box's image button. This allows you to browse local images and select an image to upload as a box's image cover (background).

There are 2 methods for uploading cover image:

1. Form Method
2. AJAX Post Method

Form Method

Here we use coverImageHandler parameter to specify upload handler for saving image on the server.

const builder = new ContentBox({
    wrapper: '.is-wrapper',
    coverImageHandler: 'savecover.php',
});

As examples, you can use the provided handler:

• savecover.php (for PHP)
• savecover.ashx (for ASP.NET)

AJAX Post Method

Here we use onUploadCoverImage parameter to specify a custom upload function.

const builder = new ContentBox({
    wrapper: '.is-wrapper',
    onUploadCoverImage: (e) => {
        const selectedFile = e.target.files[0];
        const filename = selectedFile.name;
        const reader = new FileReader();
        reader.onload = (e) => {
            let base64 = e.target.result;
            base64 = base64.replace(/^data:(.*?);base64,/, ""); 
            base64 = base64.replace(/ /g, '+');

            // Upload process
            axios.post('/upload', { image: base64, filename: filename }).then((response)=>{
                
                const uploadedImageUrl = response.data.url; // get saved image url
                builder.boxImage(uploadedImageUrl); // change cover image

            }).catch((err)=>{
                console.log(err)
            });
        }
        reader.readAsDataURL(selectedFile);
    },
});

Within the function we can use Axios to post an image to the server. Then the server should return the saved image url. Here we use boxImage(url) method to apply the image url as a background cover.

In this example, the image is posted to an endpoint: /upload If you’re using Node.js, you can implement the endpoint to save the image using:

var $path =  __dirname + '/public/uploads/'; // Physical path
var $urlpath = 'uploads/'; // URL path

app.post('/upload', (req, res) => {
    const base64Data = req.body.image;
    const filename = req.body.filename;
    require('fs').writeFile($path + filename, base64Data, 'base64', ()=>{
        res.status(200).json({
            success: true,
            url: `${$urlpath}${filename}` // return saved image url
        })
    });
});

Programmatically Load the Content

Content consists of HTML and its styles (e.g. typography styles/css includes). As explained previously, you get the edited content using the following methods:

1. To get the HTML

let html = builder.html();

1. To get the styles

let mainCss = builder.mainCss(); // Returns the default typography style for the page.
let sectioncss = builder.sectioncss(); // Returns the typography styles for specific sections on the page

You can save the HTML and its styles above into a database. And when you need to load the content back for editing, use loadHtml() and loadStyles methods.

builder.loadHtml(html);
builder.loadStyles(mainCss, sectionCss);

Undo & Redo

You can programmatically perform an undo or redo action.

To undo:

builder.undo();

To redo:

builder.redo();

Destroy

To destroy the ContentBox:

builder.destroy();

ContentBuilder.js Features

ContentBox.js uses ContentBuilder.js as its HTML editor. So most of the ContentBuilder.js options/parameters can be accessed through ContentBox.js object.

For example, to specify custom file browser (or Asset Manager):

const builder = new ContentBox({
    wrapper: '.is-wrapper',
    imageSelect: 'assets.html',
    fileSelect: 'assets.html',
    videoSelect: 'assets.html',
});

And to specify custom upload functions:

const builder = new ContentBox({
    wrapper: '.is-wrapper',

    onMediaUpload: (e)=>{
        uploadFile(e, (response)=>{
            const uploadedImageUrl = response.data.url; // get saved file url
            builder.returnUrl(uploadedImageUrl); // appply
        });
    },
    onVideoUpload: (e)=>{
        uploadFile(e, (response)=>{
            const uploadedFileUrl = response.data.url; // get saved file url
            builder.returnUrl(uploadedFileUrl); // apply
        });
    },  
});

function uploadFile(e, callback) {
    const selectedFile = e.target.files[0];
    const filename = selectedFile.name;
    const reader = new FileReader();
    reader.onload = (e) => {
        let base64 = e.target.result;
        base64 = base64.replace(/^data:(.*?);base64,/, ""); 
        base64 = base64.replace(/ /g, '+');

        // Upload process
        axios.post('/upload', { image: base64, filename: filename }).then((response)=>{
            
            callback(response);

        }).catch((err)=>{
            console.log(err)
        });
    }
    reader.readAsDataURL(selectedFile);
}

More configuration options can be found in ContentBuilder.js documentation: https://innovastudio.com/docs/contentbuilder.pdf