Functional WYSIWIG

The importance of being stateless

Editor Stack

The editor stack contains all the functions passed for each browser event.

aloha.editor.stack = [
  Selections.handle,
  Typing.handle,
  Blocks.handle,
  DragDrop.handle,
  Paste.handle,
  function (alohaEvent) {
    alohaEvent.editable = alohaEvent.editor.editables[1];
    return alohaEvent;
  },
  Mouse.handle,
  Keys.handle
];

Aloha Editor handles EVERYTHING

• caret placement & display
• inserting characters
• inserting node like <p> and <br />
• no more browser code cleanup
• no more external libraries

Integrating Aloha Editor

Integration of Aloha Editor into your application is a matter of

loading aloha.js :)

aloha()-fying editable nodes

aloha(document.querySelector('.aloha-editable'));

and tapping into the editor stack

aloha.editor.stack.unshift(function myHandler(alohaEvent) {
	// your magic goes here
});

Boundaries

Ranges vs. Selections vs. Boundaries

Ranges in different* Browsers

This is <b><em>important!</em></b>

This is []<b><em>important!</em></b>

This is <b><em>[]important!</em></b>

Boundaries to the Rescue!

We tried...

• writing super complicated algorithms
• using rangy.js
• fixing broken HTML code
• auto-correcting ranges ourselves
• introducing Aloha Editor Boundaries