Aloha Editor

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;
}