Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
1 lines (1 sloc) 3.27 KB
<h1>A Simple Blog Editor</h1><br><span style="font-style: italic;">Before you read the remainer of this text ckick on </span><span style="font-weight: bold; font-style: italic;">toggle research </span><span style="font-style: italic;">button on the right-hand-side toolbar.</span><br><div style="display: block;" class="research">What you are readoning is not a nrmal web page. It is a page that is dynamically editable. Try clicking <span style="font-weight: bold;">toggle edi</span>t to make the page editable. All the buttons in the right-hand-side toolbar are fully functional with the exception of the <span style="font-weight: bold;">save</span> button. To save the result of<br>your editing you will have to have a local Erlang server running on your machine. This is because javascript programs cannot easiliy store<br>data on your local disk.<br></div>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. <br><p>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.</p><p>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. <br></p><p>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.</p><center><img style="width: 240px; height: 180px;" src="p2.jpg"></center><div style="display: none;" class="research">Add researchhere</div><p>To enter a header click on <span style="font-weight: bold;">h1</span> or <span style="font-weight: bold;">h2</span>. To save your work click on <span style="font-weight: bold;">save</span>.</p><h2>Save<br></h2><p><span style="font-style: italic;">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.</span></p><h3>To Do</h3><ul><li>Add some method of editing hrefs and image URLs.</li><li>Add some reorganiser mode so we can more sections up and down<br></li><li>Add stuff to collapse uncollapse egions<br></li><li>Probably for safety we should always be able to toggle the editor mode.<br></li></ul><h2>Adding research<br></h2><br>Research can be embedded in a documented. Normally it is not show. Press <span style="font-weight: bold;">toggle research</span> to see the research that is <span style="text-decoration: line-through;">associated with</span> embedded in this&nbsp; document.<br><div style="display: none;" class="research">Research boxes are orange. You can add anything you like here to<br>help you remember what you were doing when you wrote the document.<br></div><br><h2>Styling data<br></h2><br>All data in the editor is styled with CSS. So we can achieve a consistent look-and-feel over the entire document.<br><br>Here's some erlang code in a preformatted block.<br><pre>-module(hello).<br>-compile(export_all).<br><br>main() -&gt;<br> "hello world".<br></pre>&nbsp;