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.
<!-- 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 Configuration settings
The textcolor plugin can be configured to control both the foreground- and background-color, separate of each other. You may specify any valid css color values, like blue, #f00, rgb(123,45,67), etc.
The configuration has to be applied the following way:
Aloha.settings = {
plugins: {
textcolor: {
config: {
color: {
// If you want to disable the foreground color entirely, must be set this to `false`
// Default: true
enabled: true,
// Specify which colors the palette should display.
// Use an empty array to disable the palette.
// Default: See "default configuration" section below
palette: ['blue', '#f00', 'rgb(123,45,67)'],
// If the user should be able to clear the color value.
// This is shown by having an extra entry shown in the palette.
// Default: true
allowClear: true,
// If the user should be allowed to select a color which is not defined in the palette.
// Note that this setting needs to be set to `true`, for the options `allowCustomInput`, `allowTransparency`
// to be available/take effect.
// Default: true
allowOutsidePalette: true,
// If it should display a color picker to the user to pick a custom color value.
// Requires `allowOutsidePalette` to be `true` to work.
// Default: true
allowCustomInput: true,
// If the user should be able to change the transparency of a selected color.
// Usually done by displaying a slider.
// Requires `allowOutsidePalette` to be `true` to work.
// Default: false
allowTransparency: true,
},
"background-color": {
// Same settings as described above, just for background colors.
}
}
}
}
};
You may also specify configurations for specific editables by using the css-selector as key:
Aloha.settings = {
plugins: {
textcolor: {
editables: {
// this will disable the foreground color and overwrite the background-colors for the element with the id "top-text"
'#top-text': {
"color": {
enabled: false,
},
"background-color": {
palette: ['#FFEE00']
}
},
// show only these textcolors and disable background-colors for editables with class 'article'
'.article': {
"color": {
palette: [ '#FFEEEE', 'rgb(255,255,0)', '#FFFFFF' ],
allowOutsidePalette: false,
},
"background-color": {
enabled: false,
}
}
}
}
}
}
1.2 Default Configuration
{
"color": {
enabled: true,
palette: [
'#ff0000',
'#0f0',
'blue',
'rgb(0,0,0)',
'rgba(255,255,255,1)'
],
allowOutsidePalette: true,
allowCustomInput: true,
allowTransparency: false,
allowClear: true,
},
"background-color": {
enabled: true,
palette: [
'#ff0000',
'#0f0',
'blue',
'rgb(0,0,0)',
'rgba(255,255,255,1)'
],
allowOutsidePalette: true,
allowCustomInput: true,
allowTransparency: true,
allowClear: true,
},
}
Chapters