ContentBuilder.js

Now You Can Have Drag & Drop Content Editing in Your Own Web Apps or CMS

InnovaStudio Content Builder (ContentBuilder.js) is a JQuery plugin that converts a <div> element into Editable Area. Unlike other editors, ContentBuilder.js provides you with beautifully designed content blocks, ready to drag & drop. You can even create your own content blocks.

VIEW DEMO BUY NOW

Write Anything Beautifully!

Note: Direct Image embed uses base64 format which can be saved as jpg or png automatically (example in PHP and ASP.NET is provided in the package).

In-place Content Editing

Direct Image Embed

Drag & Drop Beautiful Blocks

Usage

Include the required js/css files and call:

$("#contentarea").contentbuilder({
      snippetFile: 'snippets.html'
      });

The snippetFile parameter lets you specify a html file containing snippet collection (content blocks) . You can add your own snippets in this file.

To get the HTML content:

var sHTML = $('#contentarea').data('contentbuilder').html();

Below is an example of a simple snippet file and how it would look in the builder as content blocks, ready to drag & drop.

<div data-thumb="assets/simple/thumbnails/01.png">
      <div>
            <h1>Heading 1</h1>
            <p>Lorem Ipsum is simply dummy text...</p>
      </div>
</div>
<div data-thumb="assets/simple/thumbnails/02.png">
      <div>
            <p>Lorem Ipsum is simply dummy text...</p>
      </div>
</div>
<div data-thumb="assets/simple/thumbnails/03.png">
      <div>
            <img src="assets/simple/header.jpg" />
      </div>
</div>