From a presentation at HE Academy Technical Away Day, Newcastle, 7 February 2007
Most of our site content is in databases or in dedicated applications such as a blog or wiki. However, we still have a lot of content in static XHTML pages. We occasionally need to make corrections to this archive material, but I can’t justify the effort of slurping it all into a CMS, with attendant information architecture/URL design issues. This page describes a small project to allow authorised people to edit that content in a wiki-like way.
Requirements
- Make changes immediately from the browser
- Restrict editing only to the page content, not the other things on the page like breadcrumb trail, Server Side Includes etc.
- Word-processor-style editing, but with option to edit source directly
- Ability to paste from Word
- Minimal effect on source formatting
- Live spell-check
- Multiple users with logging of their activity
- Deployable on multiple sites
- Secure
- No money- must use only free software
- Relatively small amount of new code: this is primarily supposed to be a time-saving exercise
Technologies Used
- Bookmarklet in personal toolbar folder of browser
- Server-side redirect (Apache in our case)
- Password-protected directory how to do this
- Perl CGI script (but could be done with any kind of script or active page)
- Get the Perl code here: EditPl
- Comments in the code show the bookmarklet code and redirect command
- The LibXML library. This parses documents and allows you to query them with XPath: a language for finding information in an XML document.
- There are LibXML and/or XPath libraries freely available for Perl, PHP and several other languages.
- One XPath expression can extract a given element or block from an XML document, which can be as specific as you like, e.g. the second bullet point of an unnumbered list in a DIV whose class is “sidebar”. In the case of my main site, page content is always in a DIV whose id is “content”. Hence the XPath expression I use is ‘//div[@id=”content”]’
- If you know how CSS selectors work, then conversion to XPath is possible How to map CSS selectors to XPath queries
- FCKEditor: a free word-processor-like HTML editor written in JavaScript (alternatives include KUPU or MCE)
- FireFox: version 2 includes as-you-type spell checking for form input
Outcomes and Lessons
- It works, my team use it, and it lets us make minor changes in pretty much the fastest way humanly possible. Non-techie colleagues like the Word-like interface.
- Originally I used the XPath library rather than LibXML. This has a very strict parser. Making sure the whole site was pedantically valid (not just W3C validator valid) created a bit (not a huge amount) of work, but it’s nice to have something that degrades more gracefully.
Further Wiki-isation
This project was about turning a collection of static web pages into something like a wiki. For me, a wiki has three key features:
- Quick editing
- Quick creation of new pages
- Rollback (tracking changes and recreating a page as it was on a certain date)
So far I have achieved 1) with a couple of days of work. 2) could be achieved with a similar effort, but would have to be highly constrained: I don’t want colleagues creating pages willy-nilly and messing up the site’s information architecture.
3) is a desirable and possible goal. The system already makes copies of all edits. I plan to adapt code from the open source wiki OddMuse, which in turn uses the standard free tool diff, to allow users to compare how a document looked on two different dates.
Leave a Reply