Hyperframe flatfile CMS

Editing pages online

Unlike the majority of file-based CMS systems, Hyperframe allows you to build your pages in the standard HTML language, and thus does not require you to spend time learning any product-specific markup language. Pages can of course be built offline and then uploaded, as you would do with a traditional website. Alternatively,  you can edit your pages online in a browser such as Mozilla Firefox, using CKEditor's live page mode. This mode will be ideal for those users who 'just want to get creative' without having to learn about the technicalities of HTML, as it gives you an immediate view of your changes. It is also ideal for Web professionals where updates or adustments to pages are needed.

They say the proof of a software product is in whether the authors themselves use it... and in fact the majority of this help material was created using Hyperframe's online editor connected to a local webserver. I think that should settle any doubts about whether it is robust enough for production work.

To enter editing mode, open the page you wish to edit in your browser, and add the administrative parameter to the URL. By default this is '?admin' -but can be changed for improved security. For example, http://mysite.com/page.htm  becomes  http://mysite.com/page.htm?admin
Log in with your username and password. The top bar should change to a black-background dropdown menu. Select Editor..Editor On from this menu

Now click in the centre content section of the page, and the editing toolbar should appear..

Editing is done right on the page itself, so you see the results immediately. The editor we are using is the excellent CKEditor, for which there is plentiful help on the developer's site, so no need to repeat it here. To find out what each toolbar button does, hover the mouse over it. Probably one of the most useful features is the 'Show block boundaries' button which allows you to see how the text is arranged into paragraphs.

CKEditor was chosen because in general its editing functions behave very predictably and reliably. In this respect it is a real pleasure to use when compared to the weird and aggravating quirkiness of the editors bundled with some mainstream CMS. It is however important to remember that you are editing HTML here, not a wordprocessor document, and that the groundrules differ considerably. Persons with no understanding of HTML syntax would benefit from a little reading on the subject, as that will enlighten them as to why things are done the way they are. 

When entering line-breaks, note that Enter on its own creates a new paragraph using <p> HTML tags. Shift-Enter creates a line break <b>. The important point here is that <p> is recognised as an editing-region boundary, but <br> is not treated as a boundary. Therefore if you start newlines with Shift-Enter, any styling you apply will continue across all such lines in that editing region. This may seem like a bug at first, but it's the way things are designed to work. The problem mainly arises with imported documents which use a double <br><br> as a pseudo-paragraph. To mitigate this issue, documents imported into Hyperframe are filtered to replace incidences of double line-breaks with paragraphs.

A page preview option is now available, which gives you a very good idea what the central page section will look like in the currently active frame. There is no need to save before previewing. The preview opens in a popup window so as not to affect the editing session. Note that previews rely on piped data, and hence an attempt to refresh a preview or to change its frame will result in a 404 error message. This is because the preview is transient data which the browser can only load only once per new preview.

Some changes have been made to the default CKEditor behaviours, to suit Hyperframe:

As of v3.0 on, the image linking and upload dialogs have had an extensive overhaul. We feel that the new approach will be a lot more intuitive to all levels of user. 

The toolbar has been simplified somewhat by removing the less commonly-used buttons. The font options have been removed, since it is almost never good practice to insert font declarations into webpages. The text colour options have been retained since they are sometimes useful, for example for highlighting, but again it should be remembered that excessive use of random colours in a page leads to a very unprofessional-looking result. Sparingly, is the word. The main colours used by the site should be determined by the stylesheet, which is located in the site's frame. This way, colours are uniform across the site, and furthermore you don't have to keep setting them again and again. 

The option to add mailto: URLs has been removed, and as of v2.5, the saving of pages containing unprotected (and therefore spam-vulnerable) email addresses has been prohibited by default. If you don't care about address harvesting then you can turn this filter off, but doing so is highly inadvisable.  Generally it is best to use a 'contact us' form instead, since if correctly coded this does not expose your email address to misappropriation by robots.

It is relatively easy to restore any removed buttons you might need. The full list is retained in codebase/ck_config.js, along with the Hyperframe-specific list.

A break-below-images button has been added, since this is often needed in pages with text-flow around images.

The hyperlink toolbar item has been modified so as not to automatically prefix 'http://' to links. This behaviour seems to have originated in TinyMCE, which CKEditor followed suit from. Whatever its origins, it seems like another case of excessive hand-holding of inexperienced users causing needless problems for those who know what they're doing.  Better stick to the accepted HTML standards, which are that:

  • Local links should be typed as straight filenames, eg 'ourservices.htm'
  • Offsite links should be typed as a full URL, eg 'http://www.otherdomain.com/contact.php'


There is no toolbar option to turn on CKEditor's spellchecker, however the Firefox browser already has spellcheck capability as standard, so it was decided not to duplicate this functionality.

Version 4 now includes a warning on leaving a webpage or menu file with unsaved changes.

It is also worth noting at this point that whilst Hyperframe can display documents in any language supported by the browser, the online editor interface only fully supports English. This is simply because we as a small outfit do not have the resources to compile translation lookup-tables for perhaps twenty or more languages. CKEditor has multilanguage support, however the range of words in the translation tables does not cover all of the requirements in Hyperframe dialogs. Hence if you set an international language you'll find that some items are still in English.