H2

A Simple Blog Editor

Before you read the remainer of this text ckick on toggle research button on the right-hand-side toolbar.

What you are readoning is not a nrmal web page. It is a page that is dynamically editable. Try clicking toggle edit to make the page editable. All the buttons in the right-hand-side toolbar are fully functional with the exception of the save button. To save the result of
your editing you will have to have a local Erlang server running on your machine. This is because javascript programs cannot easiliy store
data on your local disk.

Screen layout - the HTYNL and CSS bit

This page has three main sections. A content area, where the blog is, a toolbar area on the right-hand side of the screen, and a header area.

The toolbar and header areas are fixed with a little bit of HTML and CSS magic. The HTML looks like this:

<body>
   <div id="header"></div>
   <div id="right-sidebar"></div> 
   <div id="content"></div>
</body>

And the CSS looks like this:

body {
  padding-top:120px;
  padding-left:100px;
  padding-right:320px;
 }

div#header {
  background-color:#aabbcc;
  position:fixed;
  padding-left:10px;
  top:0;
  left:0;
  width:500%;
  height:50px;  
 }

 div#right-sidebar{
  background-color:#bbccee;
  position:fixed;
  padding-left:20px;
  padding-right:10px;
  top:50px;
  right:0;
  width:250px; 
  height:100%;
 }

 * html body{
  overflow:hidden;
 } 

 * html div.content{
  height:100%;
  overflow:auto;
 }

Actually the CSS is kore complex than this, biut the important point to obseve is that the position:fixed declaration. This makes sure that the header and right-side bar remain fixed whereas the central region in scrollable.

Adding the buttons

Now we need some jquery magic to add a few biuttons to the toolbar. I'm only going to show you the code to add one button to the toolbar - the all important toggle toggle edit button.

Here's the code in all it's glory:

<script src="jquery-1.3.2.min.js"></script>

<script>

$(document).ready(function(){setup()});

function setup()
{
   
    add_regular_button(bbar, "toggle edit", 
		       function(){toggle_edit()});

I've just got back from the Erlang Factory held in London. I came back flushed with ideas and a long list of things I wanted to try. Not the least of these was couchDB.

The week before the Erlang factory I had discoveer how to make the contentEditable mode in firefow work and had thrown together a few simple edables of how to make specialiesed editors using a simple combinayion of the magnificant jQry library, contenetEdiatbale modes and Erlang.

jQuery is used to toggel content editable mode and to dynamicslly add and remove buttons to the window. This code is so simple and the result so powerful that I'm still pretty shocked at what can be achieved with so little code.

You'll see that some buttons come and go and that the background color of the editor changes. Azure means the content it editable. Pink means it is locked.

To enter a header click on h1 or h2. To save your work click on save.

Save

Note that all old versions of the document are saved. Note:to save a document you must have a functioning erlang server running in the background.

To Do

Add some method of editing hrefs and image URLs.
Add some reorganiser mode so we can more sections up and down
Add stuff to collapse uncollapse egions
Probably for safety we should always be able to toggle the editor mode.

Adding research

Research can be embedded in a documented. Normally it is not show. Press toggle research to see the research that is associated with embedded in this document.

Styling data

All data in the editor is styled with CSS. So we can achieve a consistent look-and-feel over the entire document.

Here's some erlang code in a preformatted block.

-module(hello).
-compile(export_all).

main() ->
    "hello world".