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.

Add researchhere
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.
Research boxes are orange. You can add anything you like here to
help you remember what you were doing when you wrote the 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".