Aloha Editor

These guides help you to make your content editable and to develop Aloha.

Understanding the Aloha Editor core

After reading this guide, you will be able to:

  • Understand how Aloha Editor initialized
  • Use basic functionality the core provides
  • Understand Aloha Editables, and what they do
  • Core Aloha Editor events

1 Core files

TODO describe file contents

  • src/lib/aloha.js
  • src/lib/aloha-bootstrap.js
  • src/lib/aloha/core.js

2 Initialization Process

When Aloha Editor is loading several steps are completed until the initialization process is finished.

TODO add description for init process and events!


// init process taken from core.js
Aloha.stage = 'loadPlugins';
Aloha.loadPlugins(function(){
	Aloha.stage = 'initAloha';
	Aloha.initAloha(function(){
		Aloha.stage = 'initPlugins';
		Aloha.initPlugins(function(){
			Aloha.stage = 'initGui';
			Aloha.initGui(function(){
				Aloha.stage = 'alohaReady';
				Aloha.trigger('aloha-ready');
			});
		});
	});
});

3 How to use require

TODO describe how Aloha.require is used

4 Internationalization

TODO describe

5 Logging

TODO describe

6 Utilities

TODO describe GENTICS.Utils.dom and the like

7 Events

Events are bound to with Aoha.bind and triggered with Aloha.trigger.

  • aloha-smart-content-changed
  • aloha-editable-activated
  • aloha-editable-deactivated
  • aloha-selection-changed

7.1 aloha-smart-content-changed Event

A smart content change occurs when a special editing action, or a combination of interactions are performed by the user during the course of editing within an editable. The smart content change event would therefore signal to any component that is listening to this event, that content has been inserted into the editable that may need to be prococessed in a special way. The smart content change event is also triggered after an idle period that follows rapid, basic changes to the contents of an editable such as when the user is typing.

7.2 aloha-editable-activated Event

Documentation pending.

7.3 aloha-editable-deactivated Event

Documentation pending.

7.4 aloha-selection-changed

The aloha-selection-changed event is fired whenever the selection returned by Aloha.getSelection() changes. It is not recommended to bind to this event unless you know what you are doing. Instead consider subscribing to the aloha.selection.context-change channel.

8 PubSub

Aloha has a publish/subscribe system. For more information on how to use it, see PubSub.js in the src/lib/vendor folder.

Aloha publishes messages on the following channels

  • aloha.selection.context-change
The message that will be published contains two properties - range the current value of Aloha.Selection.getRangeObject() - the event that caused the context change The message will be published every time the context of the selection changes. The context of the selection changes whenever the startContainer node or endContainer node of any range in the selection returned by Aloha.getSelection() changes, or any of their ancestors change, or any attributes of the container nodes or their ancestors change. The ancestor tree is calculated up to including the containing Aloha editable. Subscribing to this channel is preferred over aloha-selection-changed to avoid unnecessary processing of the DOM while the user is typing. To be able to type without perceptible lag is considered by the Aloha team to be one of the most important aspects of editor-performance.

9 Editables

Documentation pending.

.