diff --git a/demo/customcolumns.html b/demo/customcolumns.html index 0d5d77d..ce71860 100644 --- a/demo/customcolumns.html +++ b/demo/customcolumns.html @@ -45,7 +45,7 @@ $("#mycanvas").gridmanager({ debug : 1 , - buttons: [[12], [6,6], [4,4,4], [3,3,3,3], [2,1,2,1,2,1,3], [1,3,1,4,3], [2,8,2], [4,8], [8,4]] + controlButtons: [[12], [6,6], [4,8,4], [3,7,1,1], [2,1,2,1,2,1,3], [1,3,1,4,3], [2,8,2], [4,8], [8,4]] }); diff --git a/demo/fluid.html b/demo/fluid.html new file mode 100644 index 0000000..b01ac66 --- /dev/null +++ b/demo/fluid.html @@ -0,0 +1,59 @@ + + + + + Fluid - Gridmanager Development + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+
+ + + + + + diff --git a/demo/fluidtest.html b/demo/fluidtest.html deleted file mode 100644 index d7db06d..0000000 --- a/demo/fluidtest.html +++ /dev/null @@ -1,146 +0,0 @@ - - - - - Simple - Gridmanager Development - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - -
-
- - - - - - diff --git a/demo/index.html b/demo/index.html index 8f590cd..f69141f 100644 --- a/demo/index.html +++ b/demo/index.html @@ -19,12 +19,13 @@

Gridmanager.js v 0.2.0

Demos:

diff --git a/dist/css/jquery.gridmanager.css b/dist/css/jquery.gridmanager.css index edd36b1..bfaa799 100644 --- a/dist/css/jquery.gridmanager.css +++ b/dist/css/jquery.gridmanager.css @@ -7,21 +7,22 @@ */ #gm-controls {margin:5px 0;} -#gm-canvas {min-height: 100px; } -#gm-canvas div.row.gm-editing, #gm-canvas div.row-fluid.gm-editing {padding: 5px; -webkit-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75); - -moz-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75); - box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75); min-height: 20px; margin-bottom: 10px; } - -#gm-canvas div.gm-editing -{ -padding:4px 15px; min-height: 30px; -webkit-box-shadow: inset 0px 0px 5px 0px rgba(50, 50, 50, 0.75); - -moz-box-shadow: inset 0px 0px 5px 0px rgba(50, 50, 50, 0.75); - box-shadow: inset 0px 0px 5px 0px rgba(50, 50, 50, 0.75); -} - +#gm-canvas {min-height: 100px;} +#gm-canvas .gm-editing { + -webkit-box-shadow: inset 0px 0px 5px 0px rgba(50, 50, 50, 0.75); + -moz-box-shadow: inset 0px 0px 5px 0px rgba(50, 50, 50, 0.75); + box-shadow: inset 0px 0px 5px 0px rgba(50, 50, 50, 0.75); + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; + padding:4px 15px; + min-height: 30px; + } + +#gm-canvas div.row.gm-editing, +#gm-canvas div.row-fluid.gm-editing { + padding: 5px; + min-height: 20px; margin-bottom: 10px;} #gm-canvas div.gm-tools {padding:3px; min-height: 30px; display:block; clear:both;} #gm-canvas div.gm-tools a:hover {cursor: pointer;} - -/* TinyMCE */ -#gm-canvas div.mce-content-body {border:1px solid red;} \ No newline at end of file diff --git a/dist/js/jquery.gridmanager.js b/dist/js/jquery.gridmanager.js index bac9deb..9f7ca34 100644 --- a/dist/js/jquery.gridmanager.js +++ b/dist/js/jquery.gridmanager.js @@ -31,38 +31,36 @@ gm.log("+ Create Canvas"); var html=gm.$el.html(); gm.$el.html(""); - var c="
" + html + "
"; + var c="
" + html + "
"; gm.$el.append(c); }; // Build and prepend the control panel gm.createControls = function(){ gm.log("+ Create Controls"); - var prependstring=("
" + gm.options.controls.prepend); + var prependstring=(gm.options.canvasModal + "
" + gm.options.controlPrepend); var buttons=[]; // Prepend dynamically generated buttons - $.each(gm.options.buttons, function(i, val){ + $.each(gm.options.controlButtons, function(i, val){ var _class=gm.generateButtonClass(val); - buttons.push(" " + _class + ""); + buttons.push(" " + _class + ""); gm.generateClickHandler(val); }); - gm.$el.prepend(prependstring + buttons.join("") + gm.options.controls.append); + gm.$el.prepend(prependstring + buttons.join("") + gm.options.controlAppend); }; // Add click functionality to the buttons gm.initControls = function(){ - var canvas=gm.$el.find("#" + gm.options.canvas.id); + var canvas=gm.$el.find("#" + gm.options.canvasId); gm.log("+ InitControls Running"); // Turn editing on or off gm.$el.on("click", "button.gm-switch", function(){ if(gm.status){ gm.deinitCanvas(); - $(this).text("Editor ON"); } else { gm.initCanvas(); - $(this).text("Editor OFF"); } // Make region editable @@ -72,6 +70,7 @@ rteRegion.attr("contenteditable", true); gm.rteControl("attach", rteRegion ); } + // Save Function }).on("click", "a.gm-save", function(){ gm.deinitCanvas(); @@ -79,12 +78,18 @@ // View Source in Alert Dialog }).on("click", "a.gm-viewsource", function(){ - gm.deinitCanvas(); - window.alert(canvas.html()); + gm.deinitCanvas(); + var source=gm.htmlEncode(canvas.html()); + var modal=$("#canvasModal"); + modal.find(".modal-body").html("
" + source + "
"); + gm.log(source); + modal.modal(); - // Row settings + /* Row settings - coming at some point }).on("click", "a.gm-rowSettings", function(){ gm.log("settings"); + */ + // Add new column to existing row }).on("click", "a.gm-addColumn", function(){ $(this).parent().after(gm.createCol(2)); @@ -93,7 +98,7 @@ }).on("click", "a.gm-colDecrease", function(){ var col = $(this).closest("div.gm-editing"); var t=gm.getColClass(col); - if(t.colWidth > gm.options.col.min){ + if(t.colWidth > gm.options.colMin){ t.colWidth--; col.switchClass(t.colClass, "col-md-" + t.colWidth, 200); } @@ -102,7 +107,7 @@ }).on("click", "a.gm-colIncrease", function(){ var col = $(this).closest("div.gm-editing"); var t=gm.getColClass(col); - if(t.colWidth < gm.options.col.max){ + if(t.colWidth < gm.options.colMax){ t.colWidth++; col.switchClass(t.colClass, "col-md-" + t.colWidth, 200); } @@ -139,9 +144,9 @@ // Turns canvas into gm-editing mode - does most of the hard work here gm.initCanvas = function(){ // cache canvas - var canvas=gm.$el.find("#" + gm.options.canvas.id); - var cols=canvas.find(gm.options.col.selector); - var rows=canvas.find(gm.options.row.selector); + var canvas=gm.$el.find("#" + gm.options.canvasId); + var cols=canvas.find(gm.options.colSelector); + var rows=canvas.find(gm.options.rowSelector); gm.log("+ InitCanvas Running"); // Show the template controls gm.$el.find("#gm-addnew").show(); @@ -151,24 +156,22 @@ gm.activateCols(cols); // Make Rows sortable canvas.sortable({ - items: gm.options.row.selector + ".gm-editing", + items: gm.options.rowSelector + ".gm-editing", axis: 'y', placeholder: 'bg-warning', handle: ".gm-tools", forcePlaceholderSize: true, opacity: 0.7, revert: true, - containment: "parent", tolerance: "pointer", cursor: "move" }); // Make columns sortable rows.sortable({ - items: gm.options.col.selector, + items: gm.options.colSelector, axis: 'x', handle: ".gm-tools" , forcePlaceholderSize: true, opacity: 0.7, revert: true, - containment: "parent", - tolerance: "pointer", + tolerance: "pointer", cursor: "move" }); @@ -177,9 +180,9 @@ gm.deinitCanvas = function(){ // cache canvas - var canvas=gm.$el.find("#" + gm.options.canvas.id); - var cols=canvas.find(gm.options.col.selector); - var rows=canvas.find(gm.options.row.selector); + var canvas=gm.$el.find("#" + gm.options.canvasId); + var cols=canvas.find(gm.options.colSelector); + var rows=canvas.find(gm.options.rowSelector); gm.log("- deInitCanvas Running"); // Hide template control @@ -197,7 +200,7 @@ // Push cleaned div content somewhere to save it gm.saveremote = function(){ - var canvas=gm.$el.find("#" + gm.options.canvas.id); + var canvas=gm.$el.find("#" + gm.options.canvasId); $.ajax({ type: "POST", url: gm.options.remoteURL, @@ -209,8 +212,8 @@ /*------------------------------------------ ROWS ---------------------------------------*/ gm.activateRows = function(rows){ gm.log("++ Activate Rows Ran"); - var prepend=gm.toolFactory(gm.options.row.buttonsPrepend); - var append=gm.toolFactory(gm.options.row.buttonsAppend); + var prepend=gm.toolFactory(gm.options.rowButtonsPrepend); + var append=gm.toolFactory(gm.options.rowButtonsAppend); rows.addClass("gm-editing").prepend(prepend).append(append); }; @@ -221,10 +224,10 @@ // Creates a row, accepting an array of column widths to create child cols gm.createRow = function(colWidths){ - var rowHTML= gm.options.row.prepend + gm.toolFactory(gm.options.row.buttonsPrepend) + gm.options.row.append; - $.each(colWidths, function(i, val){ - rowHTML=rowHTML + gm.createCol(val); - }); + var rowHTML= gm.options.rowPrepend + gm.toolFactory(gm.options.rowButtonsPrepend) + gm.options.rowAppend; + $.each(colWidths, function(i, val){ + rowHTML=rowHTML + gm.createCol(val); + }); return rowHTML; }; @@ -232,8 +235,8 @@ gm.activateCols = function(cols){ cols.addClass("gm-editing"); $.each(cols, function(i, val){ - var prepend=gm.toolFactory(gm.options.col.buttonsPrepend) + "
"; - var append="
" + gm.toolFactory(gm.options.col.buttonsAppend); + var prepend=gm.toolFactory(gm.options.colButtonsPrepend) + "
"; + var append="
" + gm.toolFactory(gm.options.colButtonsAppend); var tempHTML=$(val).html(); var colClass = $.grep((val).className.split(" "), function(v){ return v.indexOf('col-') === 0; @@ -255,8 +258,8 @@ // Lazy function to return column markup gm.createCol = function(size){ - var prepend="
" + gm.toolFactory(gm.options.col.buttonsPrepend) + "

Content here

"; - var append="
" + gm.toolFactory(gm.options.col.buttonsAppend) + "
"; + var prepend="
" + gm.toolFactory(gm.options.colButtonsPrepend) + "

Content here

"; + var append="
" + gm.toolFactory(gm.options.colButtonsAppend) + "
"; var colHTML= prepend + append; return colHTML; }; @@ -294,8 +297,8 @@ // click handlers for dynamic row template buttons gm.generateClickHandler= function(arr){ var string="a.add" + gm.generateButtonClass(arr); - var canvas=gm.$el.find("#" + gm.options.canvas.id); - var output=gm.options.row.prepend; + var canvas=gm.$el.find("#" + gm.options.canvasId); + var output=gm.options.rowPrepend; $.each(arr, function(i, val){ output=output + gm.createCol(val); @@ -382,9 +385,9 @@ gm.cleanup = function(){ // cache canvas - var canvas=gm.$el.find("#" + gm.options.canvas.id); + var canvas=gm.$el.find("#" + gm.options.canvasId); // Clean column markup - canvas.find(gm.options.col.selector) + canvas.find(gm.options.colSelector) .removeAttr("style") .removeAttr("spellcheck") .removeAttr("id") @@ -411,6 +414,14 @@ } }; + gm.htmlEncode=function(value){ + if (value) { + return jQuery('
').text(value).html();
+              } else {
+            return '';
+          }
+        }; 
+
         // Run initializer
         gm.init(); 
     };
@@ -419,36 +430,40 @@
 
     // Options which can be overridden by the .gridmanager() call on the requesting page
     $.gridmanager.defaultOptions = {
+        // General Options
         debug: 0,
         remoteURL: "/replace-with-your-url",
-        canvas:    {
-            id: "gm-canvas"
-        },
-        buttons: [[6,6], [4,4,4], [3,3,3,3], [2,2,2,2,2,2], [2,8,2], [4,8], [8,4]],
-        controls: {
-            id:  "gm-controls",
-            prepend: "
", 
-            append: "
"
-        },
-        row: { 
-            selector: "div.row",
-            prepend:  "
",
-            append:   "
", 
-            buttonsPrepend: [
+
+        // Canvas
+        canvasId: "gm-canvas",
+        canvasModal: "
", 
+        // Top Control Row
+        controlId:  "gm-controls",
+        controlButtons: [[12], [6,6], [4,4,4], [3,3,3,3], [2,2,2,2,2,2], [2,8,2], [4,8], [8,4]],
+        controlPrepend: "
",
+        controlAppend: "
",
+        
+        // Row Specific
+        rowSelector: "div.row",
+        rowPrepend:  "
",
+        rowPppend:   "
", 
+        rowButtonsPrepend: [
                 {
-                 title:"New Column", 
-                 element: "a", 
-                 btnClass: "gm-addColumn pull-left  ",
-                 iconClass: "glyphicon glyphicon-plus"
-                },
+                   title:"New Column", 
+                   element: "a", 
+                   btnClass: "gm-addColumn pull-left  ",
+                   iconClass: "glyphicon glyphicon-plus"
+                }
+                /* coming soon when I work out how to the hell to do it,
                  {
-                 title:"Row Settings", 
-                 element: "a", 
-                 btnClass: "pull-right gm-rowSettings",
-                 iconClass: "glyphicon glyphicon-cog"
+                   title:"Row Settings", 
+                   element: "a", 
+                   btnClass: "pull-right gm-rowSettings",
+                   iconClass: "glyphicon glyphicon-cog"
                 }
+                */
             ],
-            buttonsAppend: [ 
+        rowButtonsAppend: [ 
                 {
                  title:"Remove row", 
                  element: "a", 
@@ -456,27 +471,25 @@
                  iconClass: "glyphicon glyphicon-trash"
                 }
             ],
-            settingControls: "Hi"
+        rowSettingControls: "Hi",
 
-        },
-        col: {  
-            selector: "div[class*=col-]",
-            buttonsPrepend: [              
-                
-                   {
+        // Column Specific 
+        colSelector: "div[class*=col-]",
+        colButtonsPrepend: [                
+               {
                  title:"Make Column Narrower", 
                  element: "a", 
                  btnClass: "gm-colDecrease pull-left",
                  iconClass: "glyphicon glyphicon-minus-sign"
-                },
-                {
-                 title:"Make Column Wider", 
-                 element: "a", 
-                 btnClass: "gm-colIncrease pull-left",
-                 iconClass: "glyphicon glyphicon-plus-sign"
-                }
+              },
+              {
+               title:"Make Column Wider", 
+               element: "a", 
+               btnClass: "gm-colIncrease pull-left",
+               iconClass: "glyphicon glyphicon-plus-sign"
+              }
             ],
-            buttonsAppend: [ 
+        colButtonsAppend: [ 
                 {
                  title:"Remove Column", 
                  element: "a", 
@@ -484,10 +497,10 @@
                  iconClass: "glyphicon glyphicon-trash"
                 }
             ], 
-            min: 1,
-            max: 12
-        },
-       
+        colMin: 1,
+        colMax: 12,
+
+        // RTE configuration 
         tinymce: {
             config: { 
               //selector: "[contenteditable='true']",
@@ -502,10 +515,7 @@
         },
         ckeditor: { 
               customConfig: ""
-            
-          }
-         
-
+        }
     };
     
     // Expose as jquery function
diff --git a/dist/js/jquery.gridmanager.min.js b/dist/js/jquery.gridmanager.min.js
index 28f5e74..1492429 100644
--- a/dist/js/jquery.gridmanager.min.js
+++ b/dist/js/jquery.gridmanager.min.js
@@ -1,4 +1,4 @@
 /*! gridmanager - v0.2.0 - 2014-05-24
 * http://neokoenig.github.io/jQuery-gridmanager/
 * Copyright (c) 2014 Tom King; Licensed MIT */
-!function(a){a.gridmanager=function(b,c){var d=this;d.$el=a(b),d.el=b,d.$el.data("gridmanager",d),d.init=function(){d.options=a.extend({},a.gridmanager.defaultOptions,c),d.log("INIT"),d.rteControl("init"),d.createCanvas(),d.createControls(),d.initControls(),d.initCanvas()},d.createCanvas=function(){d.log("+ Create Canvas");var a=d.$el.html();d.$el.html("");var b="
"+a+"
";d.$el.append(b)},d.createControls=function(){d.log("+ Create Controls");var b="
"+d.options.controls.prepend,c=[];a.each(d.options.buttons,function(a,b){var e=d.generateButtonClass(b);c.push(" "+e+""),d.generateClickHandler(b)}),d.$el.prepend(b+c.join("")+d.options.controls.append)},d.initControls=function(){var b=d.$el.find("#"+d.options.canvas.id);d.log("+ InitControls Running"),d.$el.on("click","button.gm-switch",function(){d.status?(d.deinitCanvas(),a(this).text("Editor ON")):(d.initCanvas(),a(this).text("Editor OFF"))}).on("click",".gm-editholder",function(){var b=a(this);b.attr("contenteditable")||(b.attr("contenteditable",!0),d.rteControl("attach",b))}).on("click","a.gm-save",function(){d.deinitCanvas(),d.saveremote()}).on("click","a.gm-viewsource",function(){d.deinitCanvas(),window.alert(b.html())}).on("click","a.gm-rowSettings",function(){d.log("settings")}).on("click","a.gm-addColumn",function(){a(this).parent().after(d.createCol(2))}).on("click","a.gm-colDecrease",function(){var b=a(this).closest("div.gm-editing"),c=d.getColClass(b);c.colWidth>d.options.col.min&&(c.colWidth--,b.switchClass(c.colClass,"col-md-"+c.colWidth,200))}).on("click","a.gm-colIncrease",function(){var b=a(this).closest("div.gm-editing"),c=d.getColClass(b);c.colWidth",f="
"+d.toolFactory(d.options.col.buttonsAppend),g=a(c).html(),h=a.grep(c.className.split(" "),function(a){return 0===a.indexOf("col-")}).join();a(c).html(e+g+f).find(".gm-handle-col").attr("title","Move "+h)}),d.log("++ Activate Cols Ran")},d.deactivateCols=function(b){b.removeClass("gm-editing"),a.each(b,function(b,c){var d=a(c).find(".gm-editholder").html();a(c).html(d)}),d.log("-- deActivate Cols Ran")},d.createCol=function(a){var b="
"+d.toolFactory(d.options.col.buttonsPrepend)+"
Content here
",c="
"+d.toolFactory(d.options.col.buttonsAppend)+"
",e=b+c;return e},d.toolFactory=function(a){var b="
",c="
",e=b+d.buttonFactory(a)+c;return e},d.buttonFactory=function(b){var c="",d=[];return a.each(b,function(a,b){d.push("<"+b.element+" title='"+b.title+"' class='"+b.btnClass+"'> ")}),c=d.join("")},d.generateButtonClass=function(b){var c="";return a.each(b,function(a,b){c=c+"-"+b}),c},d.generateClickHandler=function(b){var c="a.add"+d.generateButtonClass(b),e=d.$el.find("#"+d.options.canvas.id),f=d.options.row.prepend;a.each(b,function(a,b){f+=d.createCol(b)}),d.$el.on("click",c,function(a){d.log("Clicked "+c),e.prepend(f),d.reset(),a.preventDefault()})},d.rteControl=function(b,c){switch(d.log("RTE "+d.options.rte+" "+b),b){case"init":"undefined"!=typeof window.CKEDITOR&&(d.options.rte="ckeditor",d.log("++ CKEDITOR Found"),window.CKEDITOR.disableAutoInline=!0),"undefined"!=typeof window.tinymce&&(d.options.rte="tinymce",d.log("++ TINYMCE Found"));break;case"attach":switch(d.options.rte){case"tinymce":d.log(c),c.hasClass("mce-content-body")||c.tinymce(d.options.tinymce.config);break;case"ckeditor":a(c).ckeditor(d.options.ckeditor),d.log(this);break;default:d.log("No RTE specified for attach")}break;case"stop":switch(d.options.rte){case"tinymce":window.tinymce.remove(),d.log("-- TinyMCE destroyed");break;case"ckeditor":for(var e in window.CKEDITOR.instances)window.CKEDITOR.instances[e].destroy();d.log("-- CKEDITOR destroyed");break;default:d.log("No RTE specified for stop")}break;default:d.log("No RTE Action specified")}},d.reset=function(){d.log("~~RESET~~"),d.deinitCanvas(),d.initCanvas()},d.cleanup=function(){var a=d.$el.find("#"+d.options.canvas.id);a.find(d.options.col.selector).removeAttr("style").removeAttr("spellcheck").removeAttr("id").removeClass("mce-content-body").end().find("img").removeAttr("style").addClass("img-responsive").removeAttr("data-cke-saved-src").removeAttr("data-mce-src").end().find("div.gm-tools").remove(),d.rteControl("stop"),d.log("~~Cleanup Ran~~")},d.log=function(a){d.options.debug&&void 0!==window.console&&window.console.log(a)},d.init()},a.gridmanager.defaultOptions={debug:0,remoteURL:"/replace-with-your-url",canvas:{id:"gm-canvas"},buttons:[[6,6],[4,4,4],[3,3,3,3],[2,2,2,2,2,2],[2,8,2],[4,8],[8,4]],controls:{id:"gm-controls",prepend:"
",append:"
"},row:{selector:"div.row",prepend:"
",append:"
",buttonsPrepend:[{title:"New Column",element:"a",btnClass:"gm-addColumn pull-left  ",iconClass:"glyphicon glyphicon-plus"},{title:"Row Settings",element:"a",btnClass:"pull-right gm-rowSettings",iconClass:"glyphicon glyphicon-cog"}],buttonsAppend:[{title:"Remove row",element:"a",btnClass:"pull-right gm-removeRow",iconClass:"glyphicon glyphicon-trash"}],settingControls:"Hi"},col:{selector:"div[class*=col-]",buttonsPrepend:[{title:"Make Column Narrower",element:"a",btnClass:"gm-colDecrease pull-left",iconClass:"glyphicon glyphicon-minus-sign"},{title:"Make Column Wider",element:"a",btnClass:"gm-colIncrease pull-left",iconClass:"glyphicon glyphicon-plus-sign"}],buttonsAppend:[{title:"Remove Column",element:"a",btnClass:"pull-right gm-removeCol",iconClass:"glyphicon glyphicon-trash"}],min:1,max:12},tinymce:{config:{inline:!0,plugins:["advlist autolink lists link image charmap print preview anchor","searchreplace visualblocks code fullscreen","insertdatetime media table contextmenu paste"],toolbar:"insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"}},ckeditor:{customConfig:""}},a.fn.gridmanager=function(b){return this.each(function(){new a.gridmanager(this,b)})}}(jQuery);
\ No newline at end of file
+!function(a){a.gridmanager=function(b,c){var d=this;d.$el=a(b),d.el=b,d.$el.data("gridmanager",d),d.init=function(){d.options=a.extend({},a.gridmanager.defaultOptions,c),d.log("INIT"),d.rteControl("init"),d.createCanvas(),d.createControls(),d.initControls(),d.initCanvas()},d.createCanvas=function(){d.log("+ Create Canvas");var a=d.$el.html();d.$el.html("");var b="
"+a+"
";d.$el.append(b)},d.createControls=function(){d.log("+ Create Controls");var b=d.options.canvasModal+"
"+d.options.controlPrepend,c=[];a.each(d.options.controlButtons,function(a,b){var e=d.generateButtonClass(b);c.push(" "+e+""),d.generateClickHandler(b)}),d.$el.prepend(b+c.join("")+d.options.controlAppend)},d.initControls=function(){var b=d.$el.find("#"+d.options.canvasId);d.log("+ InitControls Running"),d.$el.on("click","button.gm-switch",function(){d.status?d.deinitCanvas():d.initCanvas()}).on("click",".gm-editholder",function(){var b=a(this);b.attr("contenteditable")||(b.attr("contenteditable",!0),d.rteControl("attach",b))}).on("click","a.gm-save",function(){d.deinitCanvas(),d.saveremote()}).on("click","a.gm-viewsource",function(){d.deinitCanvas();var c=d.htmlEncode(b.html()),e=a("#canvasModal");e.find(".modal-body").html("
"+c+"
"),d.log(c),e.modal()}).on("click","a.gm-addColumn",function(){a(this).parent().after(d.createCol(2))}).on("click","a.gm-colDecrease",function(){var b=a(this).closest("div.gm-editing"),c=d.getColClass(b);c.colWidth>d.options.colMin&&(c.colWidth--,b.switchClass(c.colClass,"col-md-"+c.colWidth,200))}).on("click","a.gm-colIncrease",function(){var b=a(this).closest("div.gm-editing"),c=d.getColClass(b);c.colWidth",f="
"+d.toolFactory(d.options.colButtonsAppend),g=a(c).html(),h=a.grep(c.className.split(" "),function(a){return 0===a.indexOf("col-")}).join();a(c).html(e+g+f).find(".gm-handle-col").attr("title","Move "+h)}),d.log("++ Activate Cols Ran")},d.deactivateCols=function(b){b.removeClass("gm-editing"),a.each(b,function(b,c){var d=a(c).find(".gm-editholder").html();a(c).html(d)}),d.log("-- deActivate Cols Ran")},d.createCol=function(a){var b="
"+d.toolFactory(d.options.colButtonsPrepend)+"
Content here
",c="
"+d.toolFactory(d.options.colButtonsAppend)+"
",e=b+c;return e},d.toolFactory=function(a){var b="
",c="
",e=b+d.buttonFactory(a)+c;return e},d.buttonFactory=function(b){var c="",d=[];return a.each(b,function(a,b){d.push("<"+b.element+" title='"+b.title+"' class='"+b.btnClass+"'> ")}),c=d.join("")},d.generateButtonClass=function(b){var c="";return a.each(b,function(a,b){c=c+"-"+b}),c},d.generateClickHandler=function(b){var c="a.add"+d.generateButtonClass(b),e=d.$el.find("#"+d.options.canvasId),f=d.options.rowPrepend;a.each(b,function(a,b){f+=d.createCol(b)}),d.$el.on("click",c,function(a){d.log("Clicked "+c),e.prepend(f),d.reset(),a.preventDefault()})},d.rteControl=function(b,c){switch(d.log("RTE "+d.options.rte+" "+b),b){case"init":"undefined"!=typeof window.CKEDITOR&&(d.options.rte="ckeditor",d.log("++ CKEDITOR Found"),window.CKEDITOR.disableAutoInline=!0),"undefined"!=typeof window.tinymce&&(d.options.rte="tinymce",d.log("++ TINYMCE Found"));break;case"attach":switch(d.options.rte){case"tinymce":d.log(c),c.hasClass("mce-content-body")||c.tinymce(d.options.tinymce.config);break;case"ckeditor":a(c).ckeditor(d.options.ckeditor),d.log(this);break;default:d.log("No RTE specified for attach")}break;case"stop":switch(d.options.rte){case"tinymce":window.tinymce.remove(),d.log("-- TinyMCE destroyed");break;case"ckeditor":for(var e in window.CKEDITOR.instances)window.CKEDITOR.instances[e].destroy();d.log("-- CKEDITOR destroyed");break;default:d.log("No RTE specified for stop")}break;default:d.log("No RTE Action specified")}},d.reset=function(){d.log("~~RESET~~"),d.deinitCanvas(),d.initCanvas()},d.cleanup=function(){var a=d.$el.find("#"+d.options.canvasId);a.find(d.options.colSelector).removeAttr("style").removeAttr("spellcheck").removeAttr("id").removeClass("mce-content-body").end().find("img").removeAttr("style").addClass("img-responsive").removeAttr("data-cke-saved-src").removeAttr("data-mce-src").end().find("div.gm-tools").remove(),d.rteControl("stop"),d.log("~~Cleanup Ran~~")},d.log=function(a){d.options.debug&&void 0!==window.console&&window.console.log(a)},d.htmlEncode=function(a){return a?jQuery('
').text(a).html():""},d.init()},a.gridmanager.defaultOptions={debug:0,remoteURL:"/replace-with-your-url",canvasId:"gm-canvas",canvasModal:"
",controlId:"gm-controls",controlButtons:[[12],[6,6],[4,4,4],[3,3,3,3],[2,2,2,2,2,2],[2,8,2],[4,8],[8,4]],controlPrepend:"
",controlAppend:"
",rowSelector:"div.row",rowPrepend:"
",rowPppend:"
",rowButtonsPrepend:[{title:"New Column",element:"a",btnClass:"gm-addColumn pull-left  ",iconClass:"glyphicon glyphicon-plus"}],rowButtonsAppend:[{title:"Remove row",element:"a",btnClass:"pull-right gm-removeRow",iconClass:"glyphicon glyphicon-trash"}],rowSettingControls:"Hi",colSelector:"div[class*=col-]",colButtonsPrepend:[{title:"Make Column Narrower",element:"a",btnClass:"gm-colDecrease pull-left",iconClass:"glyphicon glyphicon-minus-sign"},{title:"Make Column Wider",element:"a",btnClass:"gm-colIncrease pull-left",iconClass:"glyphicon glyphicon-plus-sign"}],colButtonsAppend:[{title:"Remove Column",element:"a",btnClass:"pull-right gm-removeCol",iconClass:"glyphicon glyphicon-trash"}],colMin:1,colMax:12,tinymce:{config:{inline:!0,plugins:["advlist autolink lists link image charmap print preview anchor","searchreplace visualblocks code fullscreen","insertdatetime media table contextmenu paste"],toolbar:"insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"}},ckeditor:{customConfig:""}},a.fn.gridmanager=function(b){return this.each(function(){new a.gridmanager(this,b)})}}(jQuery);
\ No newline at end of file
diff --git a/src/ckeditor.html b/src/ckeditor.html
deleted file mode 100644
index bbfe975..0000000
--- a/src/ckeditor.html
+++ /dev/null
@@ -1,59 +0,0 @@
-
-
-  
-    
-    Simple - Gridmanager Development
-    
-      
-
-    
-       
-
-    
-     
-
-     
-    
-
-    
-     
-    
-     
-    
-     
-     
-     
-     
-     
-    
-      
- 
-  
- 
-
-
- 
-
  
-    
 
-         
asdasda
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit lorem sed posuere eleifend. Ut nec tellus sed erat iaculis bibendum ac et diam. Cras convallis tincidunt placerat. Duis posuere leo quis tincidunt iaculis. Vestibulum pulvinar, neque quis cursus rhoncus, justo mi dictum enim, non facilisis ligula justo eleifend felis. Donec velit nibh, egestas eu sapien at, bibendum consectetur urna. Donec tincidunt vitae erat vitae congue.
ASADASD
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit lorem sed posuere eleifend. Ut nec tellus sed erat iaculis bibendum ac et diam. Cras convallis tincidunt placerat. Duis posuere leo quis tincidunt iaculis. Vestibulum pulvinar, neque quis cursus rhoncus, justo mi dictum enim, non facilisis ligula justo eleifend felis. Donec velit nibh, egestas eu sapien at, bibendum consectetur urna. Donec tincidunt vitae erat vitae congue.
Vivamus faucibus nibh ut aliquam dignissim. Nunc tempus velit sit amet eleifend tempor. Aliquam vel tortor euismod, viverra urna tempus, scelerisque ipsum. Pellentesque at mauris non tortor elementum pretium. Integer rutrum libero at facilisis interdum. Praesent lobortis elit erat, quis elementum justo rhoncus eu. Ut eu dui lectus. Duis faucibus eu augue ut placerat.
Vivamus faucibus nibh ut aliquam dignissim. Nunc tempus velit sit amet eleifend tempor. Aliquam vel tortor euismod, viverra urna tempus, scelerisque ipsum. Pellentesque at mauris non tortor elementum pretium. Integer rutrum libero at facilisis interdum. Praesent lobortis elit erat, quis elementum justo rhoncus eu. Ut eu dui lectus. Duis faucibus eu augue ut placerat.
Vivamus faucibus nibh ut aliquam dignissim. Nunc tempus velit sit amet eleifend tempor. Aliquam vel tortor euismod, viverra urna tempus, scelerisque ipsum. Pellentesque at mauris non tortor elementum pretium. Integer rutrum libero at facilisis interdum. Praesent lobortis elit erat, quis elementum justo rhoncus eu. Ut eu dui lectus. Duis faucibus eu augue ut placerat.
Vivamus faucibus nibh ut aliquam dignissim. Nunc tempus velit sit amet eleifend tempor. Aliquam vel tortor euismod, viverra urna tempus, scelerisque ipsum. Pellentesque at mauris non tortor elementum pretium. Integer rutrum libero at facilisis interdum. Praesent lobortis elit erat, quis elementum justo rhoncus eu. Ut eu dui lectus. Duis faucibus eu augue ut placerat.
Vivamus faucibus nibh ut aliquam dignissim. Nunc tempus velit sit amet eleifend tempor. Aliquam vel tortor euismod, viverra urna tempus, scelerisque ipsum. Pellentesque at mauris non tortor elementum pretium. Integer rutrum libero at facilisis interdum. Praesent lobortis elit erat, quis elementum justo rhoncus eu. Ut eu dui lectus. Duis faucibus eu augue ut placerat.
Vivamus faucibus nibh ut aliquam dignissim. Nunc tempus velit sit amet eleifend tempor. Aliquam vel tortor euismod, viverra urna tempus, scelerisque ipsum. Pellentesque at mauris non tortor elementum pretium. Integer rutrum libero at facilisis interdum. Praesent lobortis elit erat, quis elementum justo rhoncus eu. Ut eu dui lectus. Duis faucibus eu augue ut placerat.
Vivamus faucibus nibh ut aliquam dignissim. Nunc tempus velit sit amet eleifend tempor. Aliquam vel tortor euismod, viverra urna tempus, scelerisque ipsum. Pellentesque at mauris non tortor elementum pretium. Integer rutrum libero at facilisis interdum. Praesent lobortis elit erat, quis elementum justo rhoncus eu. Ut eu dui lectus. Duis faucibus eu augue ut placerat.
 Ut eu dui lectus. Duis faucibus eu augue ut placerat.
 Ut eu dui lectus. Duis faucibus eu augue ut placerat.
 Ut eu dui lectus. Duis faucibus eu augue ut placerat.
 Ut eu dui lectus. Duis faucibus eu augue ut placerat.
 Ut eu dui lectus. Duis faucibus eu augue ut placerat.
 Ut eu dui lectus. Duis faucibus eu augue ut placerat.

-
-    
 
-
 
- 
- 
- 
-
-
-  
\ No newline at end of file
diff --git a/src/dev.html b/src/dev.html
deleted file mode 100644
index bbfe975..0000000
--- a/src/dev.html
+++ /dev/null
@@ -1,59 +0,0 @@
-
-
-  
-    
-    Simple - Gridmanager Development
-    
-      
-
-    
-       
-
-    
-     
-
-     
-    
-
-    
-     
-    
-     
-    
-     
-     
-     
-     
-     
-    
-      
- 
-  
- 
-
-
- 
-
  
-    
 
-         
asdasda
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit lorem sed posuere eleifend. Ut nec tellus sed erat iaculis bibendum ac et diam. Cras convallis tincidunt placerat. Duis posuere leo quis tincidunt iaculis. Vestibulum pulvinar, neque quis cursus rhoncus, justo mi dictum enim, non facilisis ligula justo eleifend felis. Donec velit nibh, egestas eu sapien at, bibendum consectetur urna. Donec tincidunt vitae erat vitae congue.
ASADASD
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit lorem sed posuere eleifend. Ut nec tellus sed erat iaculis bibendum ac et diam. Cras convallis tincidunt placerat. Duis posuere leo quis tincidunt iaculis. Vestibulum pulvinar, neque quis cursus rhoncus, justo mi dictum enim, non facilisis ligula justo eleifend felis. Donec velit nibh, egestas eu sapien at, bibendum consectetur urna. Donec tincidunt vitae erat vitae congue.
Vivamus faucibus nibh ut aliquam dignissim. Nunc tempus velit sit amet eleifend tempor. Aliquam vel tortor euismod, viverra urna tempus, scelerisque ipsum. Pellentesque at mauris non tortor elementum pretium. Integer rutrum libero at facilisis interdum. Praesent lobortis elit erat, quis elementum justo rhoncus eu. Ut eu dui lectus. Duis faucibus eu augue ut placerat.
Vivamus faucibus nibh ut aliquam dignissim. Nunc tempus velit sit amet eleifend tempor. Aliquam vel tortor euismod, viverra urna tempus, scelerisque ipsum. Pellentesque at mauris non tortor elementum pretium. Integer rutrum libero at facilisis interdum. Praesent lobortis elit erat, quis elementum justo rhoncus eu. Ut eu dui lectus. Duis faucibus eu augue ut placerat.
Vivamus faucibus nibh ut aliquam dignissim. Nunc tempus velit sit amet eleifend tempor. Aliquam vel tortor euismod, viverra urna tempus, scelerisque ipsum. Pellentesque at mauris non tortor elementum pretium. Integer rutrum libero at facilisis interdum. Praesent lobortis elit erat, quis elementum justo rhoncus eu. Ut eu dui lectus. Duis faucibus eu augue ut placerat.
Vivamus faucibus nibh ut aliquam dignissim. Nunc tempus velit sit amet eleifend tempor. Aliquam vel tortor euismod, viverra urna tempus, scelerisque ipsum. Pellentesque at mauris non tortor elementum pretium. Integer rutrum libero at facilisis interdum. Praesent lobortis elit erat, quis elementum justo rhoncus eu. Ut eu dui lectus. Duis faucibus eu augue ut placerat.
Vivamus faucibus nibh ut aliquam dignissim. Nunc tempus velit sit amet eleifend tempor. Aliquam vel tortor euismod, viverra urna tempus, scelerisque ipsum. Pellentesque at mauris non tortor elementum pretium. Integer rutrum libero at facilisis interdum. Praesent lobortis elit erat, quis elementum justo rhoncus eu. Ut eu dui lectus. Duis faucibus eu augue ut placerat.
Vivamus faucibus nibh ut aliquam dignissim. Nunc tempus velit sit amet eleifend tempor. Aliquam vel tortor euismod, viverra urna tempus, scelerisque ipsum. Pellentesque at mauris non tortor elementum pretium. Integer rutrum libero at facilisis interdum. Praesent lobortis elit erat, quis elementum justo rhoncus eu. Ut eu dui lectus. Duis faucibus eu augue ut placerat.
Vivamus faucibus nibh ut aliquam dignissim. Nunc tempus velit sit amet eleifend tempor. Aliquam vel tortor euismod, viverra urna tempus, scelerisque ipsum. Pellentesque at mauris non tortor elementum pretium. Integer rutrum libero at facilisis interdum. Praesent lobortis elit erat, quis elementum justo rhoncus eu. Ut eu dui lectus. Duis faucibus eu augue ut placerat.
 Ut eu dui lectus. Duis faucibus eu augue ut placerat.
 Ut eu dui lectus. Duis faucibus eu augue ut placerat.
 Ut eu dui lectus. Duis faucibus eu augue ut placerat.
 Ut eu dui lectus. Duis faucibus eu augue ut placerat.
 Ut eu dui lectus. Duis faucibus eu augue ut placerat.
 Ut eu dui lectus. Duis faucibus eu augue ut placerat.

-
-    
 
-
 
- 
- 
- 
-
-
-  
\ No newline at end of file
diff --git a/src/gridmanager.css b/src/gridmanager.css
index edd36b1..bfaa799 100644
--- a/src/gridmanager.css
+++ b/src/gridmanager.css
@@ -7,21 +7,22 @@
  */
  
 #gm-controls {margin:5px 0;}
-#gm-canvas {min-height: 100px; } 
-#gm-canvas div.row.gm-editing, #gm-canvas div.row-fluid.gm-editing {padding: 5px; -webkit-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);
-			-moz-box-shadow:    0px 0px 5px 0px rgba(50, 50, 50, 0.75);
-			box-shadow:         0px 0px 5px 0px rgba(50, 50, 50, 0.75); min-height: 20px; margin-bottom: 10px; } 
-
-#gm-canvas div.gm-editing
-{
-padding:4px 15px;   min-height: 30px; -webkit-box-shadow: inset 0px 0px 5px 0px rgba(50, 50, 50, 0.75);
-					-moz-box-shadow:  inset  0px 0px 5px 0px rgba(50, 50, 50, 0.75);
-					box-shadow:      inset   0px 0px 5px 0px rgba(50, 50, 50, 0.75);
-}
-
+#gm-canvas {min-height: 100px;} 
+#gm-canvas .gm-editing {
+	-webkit-box-shadow: inset 0px 0px 5px 0px rgba(50, 50, 50, 0.75);
+	-moz-box-shadow:  inset  0px 0px 5px 0px rgba(50, 50, 50, 0.75);
+	box-shadow:      inset   0px 0px 5px 0px rgba(50, 50, 50, 0.75); 
+	-webkit-border-radius: 3px;
+	-moz-border-radius: 3px;
+	border-radius: 3px;
+	padding:4px 15px;   
+	min-height: 30px;
+	}  
+ 
+#gm-canvas div.row.gm-editing, 
+#gm-canvas div.row-fluid.gm-editing {
+	padding: 5px;  
+	min-height: 20px; margin-bottom: 10px;}
 #gm-canvas div.gm-tools {padding:3px;   min-height: 30px; display:block; clear:both;}
 #gm-canvas div.gm-tools a:hover {cursor: pointer;}
-
-/* TinyMCE */
-#gm-canvas div.mce-content-body {border:1px solid red;}
  
\ No newline at end of file
diff --git a/src/gridmanager.js b/src/gridmanager.js
index 07ba6f1..76bdaa3 100644
--- a/src/gridmanager.js
+++ b/src/gridmanager.js
@@ -37,38 +37,36 @@
           gm.log("+ Create Canvas"); 
            var html=gm.$el.html();
                 gm.$el.html("");
-            var c="
" + html + "
";
+            var c="
" + html + "
";
                 gm.$el.append(c); 
         };
 
         // Build and prepend the control panel
         gm.createControls = function(){  
         gm.log("+ Create Controls");   
-          var prependstring=("
" + gm.options.controls.prepend);
+          var prependstring=(gm.options.canvasModal + "
" + gm.options.controlPrepend);
           var buttons=[];
               // Prepend dynamically generated buttons
-              $.each(gm.options.buttons, function(i, val){ 
+              $.each(gm.options.controlButtons, function(i, val){ 
                 var _class=gm.generateButtonClass(val);
-                buttons.push(" " + _class + "");
+                buttons.push(" " + _class + "");
                 gm.generateClickHandler(val);
               }); 
  
-              gm.$el.prepend(prependstring + buttons.join("") + gm.options.controls.append);  
+              gm.$el.prepend(prependstring + buttons.join("") + gm.options.controlAppend);  
         }; 
                 
         // Add click functionality to the buttons        
         gm.initControls = function(){ 
-          var canvas=gm.$el.find("#" + gm.options.canvas.id);
+          var canvas=gm.$el.find("#" + gm.options.canvasId);
            gm.log("+ InitControls Running");   
 
            // Turn editing on or off 
            gm.$el.on("click", "button.gm-switch", function(){ 
                if(gm.status){ 
                 gm.deinitCanvas();
-                  $(this).text("Editor ON"); 
               } else { 
                 gm.initCanvas(); 
-                  $(this).text("Editor OFF"); 
               }
 
             // Make region editable
@@ -78,6 +76,7 @@
                     rteRegion.attr("contenteditable", true); 
                     gm.rteControl("attach", rteRegion ); 
                 } 
+
             // Save Function
             }).on("click", "a.gm-save", function(){ 
                 gm.deinitCanvas();
@@ -85,12 +84,18 @@
 
             // View Source in Alert Dialog
             }).on("click", "a.gm-viewsource", function(){  
-                gm.deinitCanvas(); 
-                window.alert(canvas.html()); 
+                gm.deinitCanvas();  
+                var source=gm.htmlEncode(canvas.html()); 
+                var modal=$("#canvasModal"); 
+                modal.find(".modal-body").html("
" + source + "
");
+                gm.log(source);
+                modal.modal(); 
             
-            // Row settings 
+            /* Row settings - coming at some point
             }).on("click", "a.gm-rowSettings", function(){ 
                 gm.log("settings"); 
+                */
+
             // Add new column to existing row    
             }).on("click", "a.gm-addColumn", function(){   
                 $(this).parent().after(gm.createCol(2)); 
@@ -99,7 +104,7 @@
             }).on("click", "a.gm-colDecrease", function(){  
               var col = $(this).closest("div.gm-editing");  
               var t=gm.getColClass(col); 
-                   if(t.colWidth > gm.options.col.min){ 
+                   if(t.colWidth > gm.options.colMin){ 
                        t.colWidth--; 
                        col.switchClass(t.colClass, "col-md-" + t.colWidth, 200); 
                    }  
@@ -108,7 +113,7 @@
             }).on("click", "a.gm-colIncrease", function(){ 
                var col = $(this).closest("div.gm-editing");  
                var t=gm.getColClass(col); 
-                if(t.colWidth < gm.options.col.max){ 
+                if(t.colWidth < gm.options.colMax){ 
                   t.colWidth++; 
                   col.switchClass(t.colClass, "col-md-" + t.colWidth, 200); 
                 }    
@@ -145,9 +150,9 @@
         // Turns canvas into gm-editing mode - does most of the hard work here
         gm.initCanvas = function(){    
           // cache canvas
-          var canvas=gm.$el.find("#" + gm.options.canvas.id);
-          var cols=canvas.find(gm.options.col.selector);
-          var rows=canvas.find(gm.options.row.selector); 
+          var canvas=gm.$el.find("#" + gm.options.canvasId);
+          var cols=canvas.find(gm.options.colSelector);
+          var rows=canvas.find(gm.options.rowSelector); 
            gm.log("+ InitCanvas Running");  
               // Show the template controls
               gm.$el.find("#gm-addnew").show();
@@ -157,24 +162,22 @@
               gm.activateCols(cols);  
               // Make Rows sortable
               canvas.sortable({
-                items: gm.options.row.selector + ".gm-editing", 
+                items: gm.options.rowSelector + ".gm-editing", 
                 axis: 'y',
                 placeholder: 'bg-warning',
                 handle: ".gm-tools",
                 forcePlaceholderSize: true,   opacity: 0.7,  revert: true,
-                containment: "parent",
                 tolerance: "pointer",
                 cursor: "move"  
                });
               // Make columns sortable
               rows.sortable({
-                    items: gm.options.col.selector, 
+                    items: gm.options.colSelector, 
                     axis: 'x',
                     handle: ".gm-tools" ,
                     forcePlaceholderSize: true,
                      opacity: 0.7,  revert: true,
-                     containment: "parent", 
-                     tolerance: "pointer",
+                    tolerance: "pointer",
                      cursor: "move"
 
               });  
@@ -183,9 +186,9 @@
 
         gm.deinitCanvas = function(){ 
           // cache canvas
-          var canvas=gm.$el.find("#" + gm.options.canvas.id);
-          var cols=canvas.find(gm.options.col.selector);
-          var rows=canvas.find(gm.options.row.selector);
+          var canvas=gm.$el.find("#" + gm.options.canvasId);
+          var cols=canvas.find(gm.options.colSelector);
+          var rows=canvas.find(gm.options.rowSelector);
 
            gm.log("- deInitCanvas Running");
               // Hide template control
@@ -203,7 +206,7 @@
 
         // Push cleaned div content somewhere to save it
         gm.saveremote =  function(){  
-        var canvas=gm.$el.find("#" + gm.options.canvas.id); 
+        var canvas=gm.$el.find("#" + gm.options.canvasId); 
             $.ajax({
               type: "POST",
               url:  gm.options.remoteURL,
@@ -215,8 +218,8 @@
 /*------------------------------------------ ROWS ---------------------------------------*/
         gm.activateRows = function(rows){
            gm.log("++ Activate Rows Ran");
-           var prepend=gm.toolFactory(gm.options.row.buttonsPrepend); 
-           var append=gm.toolFactory(gm.options.row.buttonsAppend); 
+           var prepend=gm.toolFactory(gm.options.rowButtonsPrepend); 
+           var append=gm.toolFactory(gm.options.rowButtonsAppend); 
            rows.addClass("gm-editing").prepend(prepend).append(append);  
         };
  
@@ -227,10 +230,10 @@
 
         // Creates a row, accepting an array of column widths to create child cols
         gm.createRow = function(colWidths){
-          var rowHTML= gm.options.row.prepend + gm.toolFactory(gm.options.row.buttonsPrepend) + gm.options.row.append;
-          $.each(colWidths, function(i, val){
-              rowHTML=rowHTML + gm.createCol(val);
-          });
+          var rowHTML= gm.options.rowPrepend + gm.toolFactory(gm.options.rowButtonsPrepend) + gm.options.rowAppend;
+            $.each(colWidths, function(i, val){
+                rowHTML=rowHTML + gm.createCol(val);
+            });
           return rowHTML;
         };
 
@@ -238,8 +241,8 @@
         gm.activateCols = function(cols){ 
            cols.addClass("gm-editing");  
            $.each(cols, function(i, val){
-            var prepend=gm.toolFactory(gm.options.col.buttonsPrepend) + "
";
-            var append="
" + gm.toolFactory(gm.options.col.buttonsAppend);
+            var prepend=gm.toolFactory(gm.options.colButtonsPrepend) + "
";
+            var append="
" + gm.toolFactory(gm.options.colButtonsAppend);
             var tempHTML=$(val).html(); 
             var colClass = $.grep((val).className.split(" "), function(v){
                  return v.indexOf('col-') === 0;
@@ -261,8 +264,8 @@
 
         // Lazy function to return column markup
          gm.createCol =  function(size){
-          var prepend="
" + gm.toolFactory(gm.options.col.buttonsPrepend) + "
Content here
";
-          var append="
" + gm.toolFactory(gm.options.col.buttonsAppend) + "
";
+          var prepend="
" + gm.toolFactory(gm.options.colButtonsPrepend) + "
Content here
";
+          var append="
" + gm.toolFactory(gm.options.colButtonsAppend) + "
";
           var colHTML= prepend + append;
           return colHTML; 
         };
@@ -300,8 +303,8 @@
         // click handlers for dynamic row template buttons
         gm.generateClickHandler= function(arr){  
           var string="a.add" + gm.generateButtonClass(arr);
-          var canvas=gm.$el.find("#" + gm.options.canvas.id); 
-          var output=gm.options.row.prepend; 
+          var canvas=gm.$el.find("#" + gm.options.canvasId); 
+          var output=gm.options.rowPrepend; 
 
               $.each(arr, function(i, val){ 
                 output=output +  gm.createCol(val); 
@@ -388,9 +391,9 @@
 
         gm.cleanup =  function(){  
           // cache canvas
-          var canvas=gm.$el.find("#" + gm.options.canvas.id);
+          var canvas=gm.$el.find("#" + gm.options.canvasId);
               // Clean column markup
-              canvas.find(gm.options.col.selector)
+              canvas.find(gm.options.colSelector)
                   .removeAttr("style")
                   .removeAttr("spellcheck")
                   .removeAttr("id")
@@ -417,6 +420,14 @@
             }
         };
 
+        gm.htmlEncode=function(value){
+          if (value) {
+            return jQuery('
').text(value).html();
+              } else {
+            return '';
+          }
+        }; 
+
         // Run initializer
         gm.init(); 
     };
@@ -425,36 +436,40 @@
 
     // Options which can be overridden by the .gridmanager() call on the requesting page
     $.gridmanager.defaultOptions = {
+        // General Options
         debug: 0,
         remoteURL: "/replace-with-your-url",
-        canvas:    {
-            id: "gm-canvas"
-        },
-        buttons: [[6,6], [4,4,4], [3,3,3,3], [2,2,2,2,2,2], [2,8,2], [4,8], [8,4]],
-        controls: {
-            id:  "gm-controls",
-            prepend: "
", 
-            append: "
"
-        },
-        row: { 
-            selector: "div.row",
-            prepend:  "
",
-            append:   "
", 
-            buttonsPrepend: [
+
+        // Canvas
+        canvasId: "gm-canvas",
+        canvasModal: "
", 
+        // Top Control Row
+        controlId:  "gm-controls",
+        controlButtons: [[12], [6,6], [4,4,4], [3,3,3,3], [2,2,2,2,2,2], [2,8,2], [4,8], [8,4]],
+        controlPrepend: "
",
+        controlAppend: "
",
+        
+        // Row Specific
+        rowSelector: "div.row",
+        rowPrepend:  "
",
+        rowPppend:   "
", 
+        rowButtonsPrepend: [
                 {
-                 title:"New Column", 
-                 element: "a", 
-                 btnClass: "gm-addColumn pull-left  ",
-                 iconClass: "glyphicon glyphicon-plus"
-                },
+                   title:"New Column", 
+                   element: "a", 
+                   btnClass: "gm-addColumn pull-left  ",
+                   iconClass: "glyphicon glyphicon-plus"
+                }
+                /* coming soon when I work out how to the hell to do it,
                  {
-                 title:"Row Settings", 
-                 element: "a", 
-                 btnClass: "pull-right gm-rowSettings",
-                 iconClass: "glyphicon glyphicon-cog"
+                   title:"Row Settings", 
+                   element: "a", 
+                   btnClass: "pull-right gm-rowSettings",
+                   iconClass: "glyphicon glyphicon-cog"
                 }
+                */
             ],
-            buttonsAppend: [ 
+        rowButtonsAppend: [ 
                 {
                  title:"Remove row", 
                  element: "a", 
@@ -462,27 +477,25 @@
                  iconClass: "glyphicon glyphicon-trash"
                 }
             ],
-            settingControls: "Hi"
+        rowSettingControls: "Hi",
 
-        },
-        col: {  
-            selector: "div[class*=col-]",
-            buttonsPrepend: [              
-                
-                   {
+        // Column Specific 
+        colSelector: "div[class*=col-]",
+        colButtonsPrepend: [                
+               {
                  title:"Make Column Narrower", 
                  element: "a", 
                  btnClass: "gm-colDecrease pull-left",
                  iconClass: "glyphicon glyphicon-minus-sign"
-                },
-                {
-                 title:"Make Column Wider", 
-                 element: "a", 
-                 btnClass: "gm-colIncrease pull-left",
-                 iconClass: "glyphicon glyphicon-plus-sign"
-                }
+              },
+              {
+               title:"Make Column Wider", 
+               element: "a", 
+               btnClass: "gm-colIncrease pull-left",
+               iconClass: "glyphicon glyphicon-plus-sign"
+              }
             ],
-            buttonsAppend: [ 
+        colButtonsAppend: [ 
                 {
                  title:"Remove Column", 
                  element: "a", 
@@ -490,10 +503,10 @@
                  iconClass: "glyphicon glyphicon-trash"
                 }
             ], 
-            min: 1,
-            max: 12
-        },
-       
+        colMin: 1,
+        colMax: 12,
+
+        // RTE configuration 
         tinymce: {
             config: { 
               //selector: "[contenteditable='true']",
@@ -508,10 +521,7 @@
         },
         ckeditor: { 
               customConfig: ""
-            
-          }
-         
-
+        }
     };
     
     // Expose as jquery function
diff --git a/src/tinymce.html b/src/tinymce.html
deleted file mode 100644
index 2a2fcbc..0000000
--- a/src/tinymce.html
+++ /dev/null
@@ -1,58 +0,0 @@
-
-
-  
-    
-    Simple - Gridmanager Development
-    
-      
-
-    
-       
-
-    
-     
-
-     
-    
-
-    
-     
-    
-     
-    
-     
-     
-     
-     
-    
-      
- 
-  
- 
-
-
- 
-
  
-    
 
-         
asdasda
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit lorem sed posuere eleifend. Ut nec tellus sed erat iaculis bibendum ac et diam. Cras convallis tincidunt placerat. Duis posuere leo quis tincidunt iaculis. Vestibulum pulvinar, neque quis cursus rhoncus, justo mi dictum enim, non facilisis ligula justo eleifend felis. Donec velit nibh, egestas eu sapien at, bibendum consectetur urna. Donec tincidunt vitae erat vitae congue.
ASADASD
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit lorem sed posuere eleifend. Ut nec tellus sed erat iaculis bibendum ac et diam. Cras convallis tincidunt placerat. Duis posuere leo quis tincidunt iaculis. Vestibulum pulvinar, neque quis cursus rhoncus, justo mi dictum enim, non facilisis ligula justo eleifend felis. Donec velit nibh, egestas eu sapien at, bibendum consectetur urna. Donec tincidunt vitae erat vitae congue.
Vivamus faucibus nibh ut aliquam dignissim. Nunc tempus velit sit amet eleifend tempor. Aliquam vel tortor euismod, viverra urna tempus, scelerisque ipsum. Pellentesque at mauris non tortor elementum pretium. Integer rutrum libero at facilisis interdum. Praesent lobortis elit erat, quis elementum justo rhoncus eu. Ut eu dui lectus. Duis faucibus eu augue ut placerat.
Vivamus faucibus nibh ut aliquam dignissim. Nunc tempus velit sit amet eleifend tempor. Aliquam vel tortor euismod, viverra urna tempus, scelerisque ipsum. Pellentesque at mauris non tortor elementum pretium. Integer rutrum libero at facilisis interdum. Praesent lobortis elit erat, quis elementum justo rhoncus eu. Ut eu dui lectus. Duis faucibus eu augue ut placerat.
Vivamus faucibus nibh ut aliquam dignissim. Nunc tempus velit sit amet eleifend tempor. Aliquam vel tortor euismod, viverra urna tempus, scelerisque ipsum. Pellentesque at mauris non tortor elementum pretium. Integer rutrum libero at facilisis interdum. Praesent lobortis elit erat, quis elementum justo rhoncus eu. Ut eu dui lectus. Duis faucibus eu augue ut placerat.
Vivamus faucibus nibh ut aliquam dignissim. Nunc tempus velit sit amet eleifend tempor. Aliquam vel tortor euismod, viverra urna tempus, scelerisque ipsum. Pellentesque at mauris non tortor elementum pretium. Integer rutrum libero at facilisis interdum. Praesent lobortis elit erat, quis elementum justo rhoncus eu. Ut eu dui lectus. Duis faucibus eu augue ut placerat.
Vivamus faucibus nibh ut aliquam dignissim. Nunc tempus velit sit amet eleifend tempor. Aliquam vel tortor euismod, viverra urna tempus, scelerisque ipsum. Pellentesque at mauris non tortor elementum pretium. Integer rutrum libero at facilisis interdum. Praesent lobortis elit erat, quis elementum justo rhoncus eu. Ut eu dui lectus. Duis faucibus eu augue ut placerat.
Vivamus faucibus nibh ut aliquam dignissim. Nunc tempus velit sit amet eleifend tempor. Aliquam vel tortor euismod, viverra urna tempus, scelerisque ipsum. Pellentesque at mauris non tortor elementum pretium. Integer rutrum libero at facilisis interdum. Praesent lobortis elit erat, quis elementum justo rhoncus eu. Ut eu dui lectus. Duis faucibus eu augue ut placerat.
Vivamus faucibus nibh ut aliquam dignissim. Nunc tempus velit sit amet eleifend tempor. Aliquam vel tortor euismod, viverra urna tempus, scelerisque ipsum. Pellentesque at mauris non tortor elementum pretium. Integer rutrum libero at facilisis interdum. Praesent lobortis elit erat, quis elementum justo rhoncus eu. Ut eu dui lectus. Duis faucibus eu augue ut placerat.
 Ut eu dui lectus. Duis faucibus eu augue ut placerat.
 Ut eu dui lectus. Duis faucibus eu augue ut placerat.
 Ut eu dui lectus. Duis faucibus eu augue ut placerat.
 Ut eu dui lectus. Duis faucibus eu augue ut placerat.
 Ut eu dui lectus. Duis faucibus eu augue ut placerat.
 Ut eu dui lectus. Duis faucibus eu augue ut placerat.

-
-    
 
-
 
- 
- 
- 
-
-
-  
\ No newline at end of file