Grid Editor - Editor for the bootstrap grid system

Grid Editor is a visual javascript editor for the bootstrap grid system, written as a jQuery plugin.

• Dependencies: Grid Editor depens on jQuery, jQuery UI, and Bootstap, so make sure you have included those in the page. If you want to use the tincyMCE integration, load tinyMCE en tinyMCE jQuery plugin as well.

Source: github.com

1. INCLUDE CSS AND JS FILE

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="../dist/grideditor.css" />
    
<script src="https://code.jquery.com/jquery-1.11.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="../dist/jquery.grideditor.min.js"></script>

2. HTML

<div id="myGrid"></div>

3. JAVASCRIPT

$('#myGrid').gridEditor({
    new_row_layouts: [[12], [6,6], [9,3]],
});

4. OPTIONS

new_row_layouts: set the column layouts that appear in the "new row" buttons at the top of the editor.

$('#myGrid').gridEditor({
    new_row_layouts: [[12], [6,6], [9,3]],
});

row_classes: set the css classes that the user can toggle on the rows, under the settings button.

$('#myGrid').gridEditor({
    row_classes: [{'Example class', cssClass: 'example-class'}],
});

col_classes: the same as row_classes, but for columns.

row_tools: add extra tool button to the row toolbar.

$('#myGrid').gridEditor({
    row_tools: [{
        title: 'Set background image',
        iconClass: 'glyphicon-picture',
        on: { 
            click: function() {
                $(this).closest('.row').css('background-image', 'url(http://placekitten.com/g/300/300)');
            }
        }
    }]
});

col_tools: the same as row_tools, but for columns.