Mini editor (Part 3)

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

Adding Editing Buttons

There's a problem with the editor. I don't know if you noticed it. When you hit carriage return in the middle of a region that you are editing a new region is created and this new region inherits the properties of the current region.

Just test this by going back to Part 2 and try editing the page. You'll find there is no way you can add, for example, a new pre region between two paragraphs. Try this, then return to this page.

To allow for addition of pre field, we'll add a pre button to the sidebar. That's easy:

$(document).ready(function(){
     editing=false;
     c = $("#content");
     b = $("<button>toggle edit</button>").click(toggle_edit);
     $("#sidebar").append(b);
     pre = $("<button>pre</button>").click(add_pre);
     $("#sidebar").append(pre);
     toggle_edit();
});

And add_pre

function add_pre()
{
   document.execCommand("insertHTML", false, 
                        "<pre>I'm pre Edit me</pre>");
}

Adding complex structures

You could also add more complex structures, I've added a button that creates an Erlang modle. Alert readers might be thinking that doing this might be a way of "bringing eclipse and refactoring to the browser" - they would be right!

If you've understood the article so far you should have no problems following the code. Just do view source and take a peek.

To run the code, click on toggle edit, then click somwhere in the document and click on add_module

More things to do

Now there are a whole bunfle of things you can do with content editable mode. Far more than just inserting HTML. For an excellent list of things to do look at http://www.quirksmode.org/dom/execCommand/