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": []
}
}
}
}
}
Chapters