Leap 1: Include & Invoke Aloha
To replace ContentEditable with Aloha Editor is as simple as 1 line of markup and 1 line of JavaScript:
aloha() transforms the element given to it into a rich-text editing canvas.
Deactivate editing by invoking
aloha.mahalo()
on the same element that was given to
aloha().
You can initialize multiple editables at once with this line of code:
Once an editable is initialized you will see that Aloha Editor uses a blinking DIV element as the caret. This caret is the minimal visual user interface (which you can style and animate with CSS, by the way).
Sooner or later you'll need more for UI than just a caret, so the next section shows you how to add a simple bold button to your UI.