A way of building rows and grids with built in editable regions; requires jQuery, jQueryUI, Bootstrap 3.x, and optionally TinyMCE or CKEditor. 

So over the weekend I was becoming annoyed with the lack of layout tools which you could use with a Rich Text Editor. Specifically, users would get bewildered by divs everywhere with Bootstrap. Let’s face it, if you’re not a coder, adding a row or clearfix class, then specifying divs with col-md-6 etc isn’t exactly straight forward.

This is designed to work in conjuction with TinyMCE or CKEditor; it uses HTML5′s contentEditable attribute to hook in -inline- instances of your RTE. Rows are sortable on the y axis and columns on the x axis, and you can add or destroy new rows easily.

It identifies all your col-md-* divs – so anything with class=”col-md-6″ (or any other number), changes the contentEditable to true, which in turn loads in the RTE. When you’re done manipulating the DOM, previewing strips out and destroys all the RTE instances, removes any additional markup, strips out inline styles on columns and lets you see the markup you’ve just created in the page, as actually will be!

Saving posts the contents of the main div to a URL via ajax as specified by you in the configuration. You can customise the column layout buttons by passing in an array of widths, i.e, [8,2,2] will create col-md-8 and then two col-md-2′s. Handy if your bootstrap grid actually uses 24 columns rather than 12.

So what started as a simple jQuery script seemed to merge into (my first) jQuery plugin. There’s probably a tone of improvements to be made, i.e, no support for nested columns, but that might be an interesting challenge in the future.