Inline Content Management System (2006)

ICMS Floating Toolbar
ICMS Floating Toolbar

A Content Management System that allows live and in context page editing. Put simply: What You See Is What You've Got.

Key Technologies

  • Object oriented PHP
  • MySQL database design and development
  • Extensive JavaScript DOM manipulation and AJAX.
  • Server-side XHTML parser
  • Comprehensive image management including resizing
  • URL re-writer web server module
  • Generates standards compliant XHTML & CSS

Requirements

Design and implement an easy to use CMS that can be easily integrated into new and existing websites.

Solution

After a number of successful proof of concept prototypes, essential to ensure the system was going to be possible, the ICMS was designed and implemented in conjunction with the first target website, Swan Housing.

The inline editor makes use of a number of key technologies, most notably DOM manipulation and AJAX, to provide a visual way to edit pages. To edit content, a user first logs in and 'edit mode' is established, introducing a toolbar at the top of each page and 'active content blocks' that highlight on mouse-over with their own mini toolbar. This mini toolbar can then be used to edit blocks and to insert new content and images, via a comprehensive image management system which includes the uploading and dynamic resizing of images.

The system also allows pages to be added and removed. This functionality is accomplished by introducing the concept of virtual pages that are created on the fly by means of a proxy and web server URL re-writer module.

The system includes, among its many features, a hierarchical user management and approval system. Standard users can make edits to the site but new content will not appear on the site until a manager has approved it.

As the editor is introduced to standard page content, great care was taken to ensure that the CSS and XHTML markup of the pages did not interfere with the editor and vice versa. This was primarily achieved by means of complex CMS selectors.

The system was designed with easy integration into other websites constantly in mind, and as such the ICMS code is entirely separate from any site specific code.

Browser Compatibility

Many of the challenges in producing such a complicated web-based interface were down to browser compatibility. The primary target platform was Mozilla Firefox, followed by the necessary tweaks to get everything working in Internet Explorer.