Aloha Editor

Aloha Editor Guides

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

Highlight Editables Plugin

The Highlight Editables Plugin provides a visual hint when moving the mouse to outline editables.

1 Overview

With this plugin editable areas will be outlined when the user moves the mouse.
An active editable will be outlined with a different color.

2 Usage

Activate the plugin and decide if you want to highlight all editables.
You can use CSS to configure the look (see: Configuration).

3 Functional Description

While moving the mouse cursor the Highlight Editables plugin will highlight each editable with a yellow blinking rectangle at your page. After clicking into a rectangle the blinking yellow turns into a constant blue glowing rectangle.

The Highlight Editables plugin doesn’t work with Internet Explorer 7.

4 Components

  • No components for user interaction

5 Configuration

	Aloha.settings.plugins: {
		highlighteditables: {
			config: [ 'highlight' ],
			editables: {
				'#one': [ 'highlight' ],
				'#two': [ ] // do not show visual effect for this editable

CSS you can adapt to your needs.

.aloha-editable-highlight {
	outline: #FFE767 solid 5px;

.aloha-editable-active, .aloha-editable-active[contenteditable=true]:focus {
	outline: #80B5F2 solid 5px;