veneliniliev / grid-editor

Visual javascript editor for the bootstrap grid system, written as a jQuery plugin.

Grid Editor

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

It provides integration plugins for the following rich text editors: TinyMCE, summernote and CKEditor.

Try the demo!

Installation

• Dependencies: Grid Editor depends on jQuery, jQuery UI, and Bootstap, so make sure you have included those in the page.
  • If you want to use the tincyMCE integration, include tinyMCE and tinyMCE jQuery plugin as well.
  • If you want to use the summernote integration, include summernote as well.
  • If you want to use the CKEditor integration, include CKEditor as well.
• Download the latest version of Grid Editor and include it in your page:

<!-- Make sure jQuery, jQuery UI, and bootstrap 3 are included. TinyMCE is optional. -->
<link rel="stylesheet" type="text/css" href="grid-editor/dist/grideditor.css" />
<script src="grid-editor/dist/jquery.grideditor.min.js"></script>

Usage

$('#myGrid').gridEditor({
    new_row_layouts: [[12], [6,6], [9,3]],
});
// Call this to get the result after the user has done some editing:
var html = $('#myGrid').gridEditor('getHtml');

Methods

getHtml: Returns the clean html.

var html = $('#myGrid').gridEditor('getHtml');

Options

General 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: [{label: '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.

custom_filter: Allows the execution of a custom function before initialization and after de-initialization. Accepts a functions or a function name as string. Gives the canvas element and isInit (true/false) as parameter.

$('#myGrid').gridEditor({
    'custom_filter': 'functionname',
});

function functionname(canvas, isInit) {
    if(isInit) {
        // do magic on init
    } else {
        // do magic on de-init
    }
}

or

$('#myGrid').gridEditor({
    'custom_filter': function(canvas, isInit) {
        //...
    },
});

valid_col_sizes: Specify the column widths that can be selected using the +/- buttons

$('#myGrid').gridEditor({
    'valid_col_sizes': [2, 5, 8, 10],
});

source_textarea: Allows to set an already existing textarea as in-/output for grid editor

$('#myGrid').gridEditor({
    source_textarea: 'textarea.grideditor',
});

Rich text editor options

Grid editor comes bundles with support for the following rich text editors (RTEs):

• TinyMCE - (example)
• summernote - (example)
• CKEditor - (example)

content_types: Specify the RTE to use. Valid values: ['tinymce'], ['summernote'], ['ckeditor']. Default value: ['tinymce'].

$('#myGrid').gridEditor({
    content_types: ['summernote'],
});

ckeditor.config: Specify ckeditor config, when using the ckeditor content_types. See the CKEditor documentation. Also check out the ckeditor example.

$('#myGrid').gridEditor({
    ckeditor: {
        config: { language: 'fr' }
    }
});

summernote.config: Specify summernote config, when using the summernote content_types. See the summernote documentation. Also check out the summernote example.

$('#myGrid').gridEditor({
    summernote: {
        config: { shortcuts: false }
    }
});

tinymce.config: Specify tinyMCE config, when using the tinymce content_types. See the tinyMCE documentation. Also check out the tinymce example.

$('#myGrid').gridEditor({
    tinymce: {
        config: { paste_as_text: true }
    }
});

Font Awesome

Grid Editor can easily be used with Font Awesome by including dist/grideditor-font-awesome.css. Note that Font Awesome (min. version 4.0) has to be included before this stylesheet.

Attribution

Grid Editor was heavily inspired by Neokoenig's grid manager