Mini editor (Part 4)

This is the forth part in a seven part series on how to make a WYSIWYG structure editor using javascript, jquery, erlang and couchDB.

A seamless structure editor

It's time to stop and reflect upon what we have done. Using a handful of lines of jQuery code and content editable mode we have created a seamless editor. We can edit any content at any place on the page and see the final result immediately. There is no distinction between editing the page and browsing it. Moreover by adding buttons like add module to our toolbar we can add custom effects to our editor in a handful of lines of code.

This is like having an open office word processor in the browser, where we can easily add complex effect triggered by custom buttons.

Behind the scenes we are creating HTML data structures, but we never seem these structures. After a while the HTML we create may be a bit of a mess so we might have to read the HTML and then parse and sanitize the results.

What we cannot do is store the results of an edit. An editor that cannot store the results of an edit is pretty useless. So in the next parts of the article I'll add persistent storage to the editor.

But before we do this I want to add a whole bundle of editing buttons to the toolbar. I just added pre and add module but we want a lot more than this for our editor to be useful.

A few little problems

Astute readers will have noticed that while in editing mode you cannot click on a link, so the story gets more complicated and our editor is not entirely seamless. Nor can you edit links etc. To fix this is out of the scope of this article - it involves setting a local style of contentEditable=false in the href tag.