Aloha Editor

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

TextColor Plugin

The TextColor Plugin allows you to apply colors to your text. Select a portion of text, click the icon and choose the color you’d like to apply from the overlay menu.

1 Functional Description

In order to apply a color select the text to be highlighted and move the cursor to the “Format” tab in the Aloha Editor. Now click on the textcolor button and choose a color from the list. To remove an applied color click on the “x” icon.

When color is applied to a selection, textual contents will be wrapped in span-tags with a style setting for colors, or a class in case a class was picked.


<!-- Marking the whole paragraph and selecting 
	 #ff0000 from the textcolor swatches ... -->
<p>This is <i>my</i> text.</p>
<!-- will result in: -->
<p><span style="color: #ff0000;">This is <i>my</i> text.</span></p>

When applying a color to a collapsed selection, the selection will be extended to word level. When removing colors from text Aloha Editor will attempt to clean up left over span tags.

1.1 Components

  • colorpicker – brings up the overlay to select a color

1.2 Configuration settings

The textcolor plugin will by default offer the following colors:

  • #FFFFFF
  • #000000
  • #000FFF
  • #FFF000

It is possible to configure the global color palette and to configure color palettes for specific editables (identified by jQuery selectors): You can specify the colors as hex (#FF0000), RGB (rgb(255,0,0)) values or CSS class names (`redcolor`).


Aloha.settings = {
	plugins: {
		textcolor: {
			// this is the global setting
			config: ['#FFEE00', 'rgb(255,0,0)', '#FFFF00', '#FFFFFF', 'greenborder'],
			editables: {
				// this will disable the textcolor for the header
				'#header': [],
				// show only these colors for editables with class 'article'
				'.article': [ '#FFEEEE', 'rgb(255,255,0)', '#FFFFFF' ] 
			}
		}
	}
}