ContentBuilder.js  (ver. 2.4.8)

Write Anything Beautifully

ContentBuilder.js is a JQuery plugin that converts a <div> element into an 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.

Simply Produces Beautiful Content

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

A convenient editor for your web apps, CMS, or Online site builder



Distraction-free content editing

Quick image embed

Ready blocks in multiple categories

150+ Blocks Included

Content blocks are not just basic/individual elements (such as heading, paragraph or image). They are pre-designed content built for multiple purposes, so that you can easily choose and combine.

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 areas.

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