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.
- Part1 - toggling content editable
- Part2 - Adding some style
- Part3 - Adding editing buttons
- Part4 - A seamless structure editor
- Part5 - All the buttons
- Part6 - Storing the results forever
- Part7 - Integration with 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/