ContentBuilder.js  (ver. 2.4.5)

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.

Write Anything Beautifully!

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

Simplified Content Editing

Quick Image Embed

Drag & Drop Beautiful Blocks

150+ Blocks Included

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>

Examples

Your own blocks

This example uses a very simple content blocks.

View Demo

Saving Content

For demo purpose, the content is saved in browser's local storage.

View Demo

Multiple Instance

This example shows multiple editable area.

View Demo

Content/result can be viewed in all modern browsers. For editing, we recommend:

  • Recent versions of Chrome, Firefox, Safari, Opera
  • IE 10 or later

As Featured On


Hacker News

t3n

Product Hunt