Aloha Editor

Aloha Editor Guides

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

TextColor Plugin

The TextColor Plugin allows you to apply colors and background-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 and move the cursor to the “Format” tab in the Aloha Editor. Now click on the textcolor or the background-color 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

The color picker palette is rendered depending on how many items are configured for the textcolor or background-color

  • 36 or less colors => new row every 6 colors
  • 144 or less colors => new row every 12 colors
  • more than 144 colors => new row every 18 colors

1.2 Configuration settings

The textcolor plugin will by default offer all web-safe colors – see: Wikipedia – Web colors

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) or RGB (rgb(255,0,0)) values.

Aloha.settings = {
	plugins: {
		textcolor: {
			// if the config property is ommitted the default color palette is used
			config : {
				// these are the global settings which render the color palette for the text-color and text background
				// deactivate globally using an empty array
				"color": ['#FFEE00', 'rgb(255,0,0)', '#FFFF00', '#FFFFFF'],
				"background-color": ['#FFEE00', 'rgb(255,0,0)']
			editables: {
				// this will disable textcolors and overwrite the background-colors for the element with the id "top-text"
				'#top-text': {
					"color": [],
					"background-color": ['#FFEE00']
				// show only these textcolors and disable background-colors for editables with class 'article'
				'.article': {
					"color": [ '#FFEEEE', 'rgb(255,255,0)', '#FFFFFF' ],
					"background-color": []