Aloha Editor

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

Aloha Editor Events

At specific situations Aloha Editor and it’s plugins triggers events. Components that are listening to those events can then interact when they get the signal.

There are events related to editable areas and content modification available.

After reading this guide, you:

  • Know about available core events in Aloha Editor
  • Events provided by plugins
  • Are able to use Aloha Editor events

aloha-command-will-execute Event

This event is triggered before a command will be executed. The commandId hold the command which should be executed (eg. bold).


Aloha.trigger( 'aloha-command-will-execute', {
	'commandId'			: , // the command as string
	'preventDefault'	: , // boolean; default: false
} );

aloha-command-executed Event

This event is triggered after a command was executed with the Engine.execCommand method.


Aloha.trigger( 'aloha-command-executed', // command as string );

aloha-logger-ready Event

This event is triggered when the Aloha Editor logger is fully initialized.


Aloha.trigger( 'aloha-logger-ready' );

aloha-log-full Event

This event is triggered when the Aloha Editor log history is fully (definded by Aloha.settings.logHistory.maxEntries).


Aloha.trigger( 'aloha-log-full' );

aloha-ready Event

When Aloha Editor is fully initialized (the core, plugins and UI) the aloha-ready event is triggered.


Aloha.trigger( 'aloha-ready' );

aloha-editable-created Event

This event fires after a new editable has been created, eg. via $( '#editme' ).aloha()


Aloha.trigger( 'aloha-editable-created', [
	// jQuery object reference of an editable
] );

aloha-editable-destroyed Event

This event fires after a new editable has been destroyed, eg. via $( '#editme' ).mahalo()


Aloha.trigger( 'aloha-editable-destroyed', [ 
	// jQuery object reference of an editable
] );

aloha-editable-activated Event

This event notifies the system that an editable has been activated by clicking on it.


Aloha.trigger( 'aloha-editable-activated', {
	'oldActive'		: , //object of the editable
	'editable'		: , //object of the editable
} );

aloha-editable-deactivated Event

When an editable has been deactivated by clicking on a non editable part of the page or on an other editable this event is triggered.


Aloha.trigger( 'aloha-editable-deactivated', {
	'editable'		: , //object of the editable
} );

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.


Aloha.trigger( 'aloha-smart-content-changed', {
	'editable'			: , // object of the editable
	'keyIdentifier'		: , // char | null
	'keyCode'			: , // char | null
	'char'				: , // char | null
	'triggerType'		: , // keypress, idle, blur, paste
	'snapshotContent'	: , // snapshot content of the editable as HTML String
} );

aloha-block-selected Event

Processing of cursor keys will currently detect blocks (elements with contenteditable=false) and selects them (normally the cursor would jump right past them). This will also trigger the aloha-block-selected event.


Aloha.trigger( 'aloha-block-selected', 
	// DOM object (range selection)
);

aloha-selection-changed Event

This event is triggered when there are changes of the selection (using the mouse or cursor).


Aloha.trigger( 'aloha-selection-changed', [ 
	this.rangeObject, // range object
	event // browser event object
] );

1 Plugin: Image

Events provided by the Image Plugin.

1.1 aloha-image-unselected Event

When an image is unselected by the user.


Aloha.trigger( 'aloha-image-unselected' );

1.2 aloha-image-selected Event

When an image is selected by the user.


Aloha.trigger( 'aloha-image-selected' );

Events provided by the Link Plugin.

Triggers when a link is selected.


Aloha.trigger( 'aloha-link-selected' );

Triggers when a link was selected and the selection is removed.


Aloha.trigger( 'aloha-link-unselected' );

Triggers when a href attribute of a link is changed.


Aloha.trigger( 'aloha-link-href-change', {
	 'obj'			: , // jQuery object of link target
	 'href'			: , // URL of the repository item displayed to the user as string
	 'item'			: , // object of the repository item which is used
} );

3 Plugin: Table

Events provided by the Table Plugin.

3.1 aloha-table-selection-changed Event

Triggers when one or more cells of a table are selected or unselected.


Aloha.trigger( 'aloha-table-selection-changed' );

3.2 aloha-table-activated Event

After an existing dom-table is transformed into an editable Aloha Editor table this event is triggered.


Aloha.trigger( 'aloha-table-activated' );

4 Plugin: DragAndDropFiles

Events provided by the DragAndDropFiles Plugin.

4.1 aloha-allfiles-upload-prepared Event

After all files are prepared for the upload (aloha-file-upload-prepared) this event is triggered.


Aloha.trigger( 'aloha-allfiles-upload-prepared' );

4.2 aloha-drop-files-in-editable Event

Is triggerd when files are dropped into an editable part.


Aloha.trigger( 'aloha-drop-files-in-editable', {
	'filesObjs'		: , // object of dropped files
	'range'			: , // range object of the target
	'editable'		: , // jQuery object of the target editable
} );

4.3 aloha-drop-files-in-page Event

Is triggerd when files are dropped into the page and not an editable.


Aloha.trigger( 'aloha-drop-files-in-page', // object of dropped files );

4.4 aloha-file-upload-prepared Event

When a single file of many dropped files is ready for uploading.


Aloha.trigger( 'aloha-file-upload-prepared', // object of dropped files );

4.5 aloha-upload-progress Event

When the upload is still in progress this event is triggered after each uploaded file.


Aloha.trigger( 'aloha-upload-progress', // Aloha.RepositoryDocument object );

4.6 aloha-upload-success Event

A file is uploaded successfully.


Aloha.trigger( 'aloha-upload-success', // Aloha.RepositoryDocument object );

4.7 aloha-upload-failure Event

An error occurred while file upload.


Aloha.trigger( 'aloha-upload-failure', // Aloha.RepositoryDocument object );

4.8 aloha-upload-abort Event

An upload was aborted by the user or a script (IE/Safari only).


Aloha.trigger( 'aloha-upload-abort', // Aloha.RepositoryDocument object );

4.9 aloha-upload-error Event

When there occurred an error while uploading the files this event is triggered.


Aloha.trigger( 'aloha-upload-error', // Aloha.RepositoryDocument object );

5 Plugin: LinkBrowser

Events provided by the LinkBrowser Plugin.

When a link is selected in the link browser this event is triggerd.


Aloha.trigger( 'aloha-link-selected-in-linkbrowser' , // Aloha );

<head>

</head>
<body>
<div id="content-editable">
   <p>Aloha World</p>
</div>

<button id="act">activate Editable</button>
<button id="deact">deactivate Editable</button>

<script type="text/javascript">
   Aloha.jQuery( '#act').click( function () {
       Aloha.jQuery( '#content-editable').aloha();
   });

   Aloha.jQuery( '#deact').click( function () {
       Aloha.jQuery( '#content-editable').mahalo();
   });

   Aloha.ready( function(){
       Aloha.bind( 'aloha-editable-created', function( jEvent, editable ) {
           console.log( 'editable "' + editable.getId() + '" created' );
       });
       Aloha.bind( 'aloha-editable-destroyed', function( jEvent, editable ) {
           console.log( 'editable "' + editable.getId() + '" destroyed' );
       });
       Aloha.bind( 'aloha-editable-deactivated', function( jEvent, aEvent ) {
           console.log( 'editable "' + aEvent.editable.getId() + '" deactivated' );
       });
       Aloha.bind( 'aloha-editable-activated', function( jEvent, aEvent){
           console.log( 'editable "' + aEvent.editable.getId() + '" activated' );
       });
   });
</script>
</body>