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