Cranking 'Front-end Editing' Up a Notch!

Friday, January 11, 2013 Tags: preview

(updated 1/4/13, now slated for the next release!) Exponent CMS stands apart from most other Content Management Systems (CMS's) because the administration and management takes place on/in the frontend and not the backend.  For those not familiar with the frontend/backend disconnected nightmare; it is used in the more popular CMS's which have name letters of WP, Jmla, Drpl.  Because of this disconnect, the learning curve is pretty steep and makes a new user think they are in a separate program.  Recently, the WYSIWYG editor used in Exponent was upgraded to include an entirely new feature called 'inline editing' where you could click on the page and edit directly on the page without having to go to another view.  This feature could revolutionize the 'bread and butter' Text module which handles the site's static content!

While the CKEditor version 4 examples imply you could do this to an entire site, most Exponent modules and items contain more than just simple text data such as dates, settings, etc...  Therefore it wouldn't be feasible to apply this feature across the board, but we already have a local working implementation of a text module view which would allow you to freely edit/update/add/delete text items right on the page!  This would turn out to be a pretty handy feature, don't you think?  Here's a screen shot of the working implementation:

Some things to point out here from this working model are:

  • Notice we are on the page itself and NOT in an edit item view (see the green chrome?)
  • Each of the directly editable items is surrounded by an orange border when the mouse hovers over it (we've added that to make the editable areas stand out).  This includes the item titles and item bodies.
  • You can add/delete/edit text items directly on the page without being sent to another page to complete the action (on-the-fly)
  • The toolbar appears directly above (or below) the area being edited and moves as the page scrolls as needed.
  • The toolbar is using the new v4 skin which is much cleaner
  • (updated) You can add or delete text item titles and it updates the page accordingly.
  • (updated) Currently the working model defaults to asking if you want to save changes (or revert to saved) and you can turn on the 'fast save' setting which saves all changes transparently.

Some things we'll still try to implement would be:

  • If the above works well, we might also try to implement in-place editing of module titles and descriptions.
  • And it might be possible to implement in-place editing for item titles across most modules.
  • And an even further stretch might be to implement it more completely in specialized modules.  E.g., editing a blog post on it's own page.

If you have comments or ideas, please visit the #exponent-cms irc or the forums.