Gridmanager.js 0.3.1 released

Another huge set of changes, mainly the introduction of stackable & sortable editable regions, and  full LESS themeing support.
Give it a go here: http://neokoenig.github.io/jQuery-gridmanager/demo/

Changelog:

New style of editable regions which are stackable/editable/deletable
Added: default editable region button
Added: Theming using LESS
Default, light & dark themes now available
Large visual cleanup
Fixed: remoteURL now posts as proper key/value pair
Added: initMarkup() to autowrap non commented markup
Added: editableRegionEnabled & autoEdit options
Added: additional filterCallback option which runs on init();

Gridmanager.js 0.3.0 released

A pretty big set of changes in this one.

A massive thanks to Percy Brea for his input in moving Gridmanager.js forward, and thanks to all those who have got in touch with bug fixes and ideas!

What’s new?

  • Nested row & column support & new add nested row button
  • Added ability to add custom controls on rows & columns (with your own callbacks)
  • Added Custom column classes in addition to row classes
  • RTE’s are now attached to their own editable regions within columns
  • Responsive class support added
  • Responsive class layout mode added
  • Font Awesome now the icon default
  • Documentation now available at http://neokoenig.github.io/jQuery-gridmanager/docs

 

GridManager.js 0.2.1 released

Yes, yes, I know, rather quick after the last one. But this has some much cooler features which I didn’t want to hold back!
Now with resizeable columns, better sorting, fluid row support, better source code view, better RTE handling and some GUI improvements.

Demo | Docs | GitHub Repo

Introducing gridmanager.js

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

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 (and others to follow hopefully); it uses HTML5’s contentEditable attribute to hook in -inline- instances of TinyMCE. Rows are sortable on the y 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 TinyMCE. When you’re done manipulating the DOM, previewing strips out and destroys all the TinyMCE 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 tonne of improvements to be made, i.e, no support for multiple instances or nested columns, but that might be an interesting challenge in the future.

Try it and let me know your thoughts:

Demo | Docs | GitHub Repo

jQuery / jQuery UI / CKeditor4 / Layout Editor

In my search for a visual composer style plugin but *not* for wordpress, I didn’t find much. So I thought I’d try and build one (jQuery isn’t my strong suit) – what do you think?

Edit: now released as a jQuery plugin: gridmanager.js