Clock Blog

HTML5 contentEditable CMS?

Posted on Friday, 6 May 2011 @ 10:23 GMT in tech-blogs by Robert Arnold

This is a blog post of an idea, rather than the critique of such a system or nuisances thereof.

I have done some quick Google searches to see if there is anyone out there using the new html5 'contentEditable' feature to perform content management system tools for a Web site - and whilst there are forum posts indicating its usage I can't find anything concrete. Therefore, I'd like to, in this post - in a "think-whilst-I-write" style of blogging, explore whether I think this new HTML5 feature could be used effectively..

Ok, so I am going to go-ahead and presume that if you have read this far you know what 'contentEditable' means (not to be confused in this instance with 'designMode').

'contentEditable' was originally designed and implemented by Microsoft in Windows Internet Explorer 5.5. There was some superficial documentation on how to use them (so developers could develop rich text editors), but little thought was given to interoperability. Much of this was later reverse-engineered, and cross-browser support for basic operations is considered quite good.

So assuming that you can guide your CMS editors to use a 'contentEditable-safe' browser, then we are away and rolling.

Personally, I have found that the majority of our clients that use CMS systems have little to no experience of either html markup (or wiki formatting etc) - there are of course exceptions to the rule, but what I am thinking here is a very simple editor to allow text only amends (as I believe image/video input would result in non optimal code).

If we take a very simple site, a brochure site if you like, I believe it would be beneficial to allow specific parts of the page to be 'contentEditable', let's say in this instance - the introduction and body text.

The first two challenges that come to mind are:

  • 1) How do we distinguish between an editor or a simple user, as we don't want normal users to be able to change and save the content
  • 2) How do we save the amends
  • In answer to 1 - As we want this system to be light weight, we need to think of a way to distinguish users without necessarily implementing ACL (Access Control Lists e.g. Security Groups and the like) etc, so my first train of thought is to use a simple 'Basic access authentication' check. This itself dictates that we lose a lot of CMS functionality. As we wouldn't want the users to see the login box, we'd need to place the site on another url (which would mimic the main site - but with login)

    In answer to 2 - I believe the best method would be to place a save button on the footer (or header, or both) clicking save (using JavaScript) would take all the contentEditable regions and overwriting the saved content in the DBMS (whatever is being used).

    Having now written a few paragraphs on this, I do not think the efforts involved mean that my approach would be preferable, as we are starting to lose functionality quickly. So perhaps a change of approach is suitable...

    I still think that contentEditable has 1 big advantage over a text box in an isolated admin section.. the editor can see the amends real-time and how they effect the look and balance of the page.

    So let's assume we are going to use the a pre-existing CMS system but now allow the method described when editors/administrators are looking at the front-end of the site. This means we have now not lost our lovely ACL and vast CMS functionality, but we can let the editor choose between editing text content in the CMS or editing in-line and on-page.

    Some may argue that decent Content Management Systems have preview functionality - but the main drawback I see to this is that in introduces extra steps that are not needed. You could even allow the preview function to use contentEditable regions (reducing the number of steps for editors).

    Sorry for the 'waffle', I did state this was going to be a "think whilst I write" style of blogging!

    In conclusion

    I started out with thoughts that contentEditable might provide an answer to a very light weight CMS for simple sites (text only amends). Through my thought process (and as you can see) I now believe that contentEditable could be used very effectively to aid CMS's rather than as a replacement/alternative method.

    Your thoughts on such an implementation are welcomed.

    blog comments powered by Disqus