Customizing the Ephox editor's colors
Customizing the Ephox editor's colors for use in IBM Connections™.
About this task
You can specify the list of colors to display in the editor's menu. By default, the colors list
is empty because all of its colors are commented out, as shown in the following snippet from the
config.js
file:
colors: {
buttons: [
// { value: '#FFF', text: 'white' },
// { value: '#000', text: 'black' },
// { value: '#444', text: 'gray' },
// { value: '#777', text: 'metal' },
// { value: '#CCC', text: 'smoke' },
// { value: '#FC1D00', text: 'red' },
// { value: '#C81500', text: 'darkred' },
// { value: '#FF8C00', text: 'darkorange' },
// { value: '#FEBE00', text: 'orange' },
// { value: '#FFFC00', text: 'yellow' },
// { value: '#22AE50', text: 'green' },
// { value: '#006400', text: 'darkgreen' },
// { value: '#3CB371', text: 'mediumseagreen' },
// { value: '#8FCD4E', text: 'lightgreen' },
// { value: '#00FF00 ', text: 'lime' },
// { value: '#0000CD', text: 'mediumblue' },
// { value: '#002360', text: 'navy' },
// { value: '#0173C1', text: 'blue' },
// { value: '#14B2F2', text: 'lightblue' },
// { value: '#ee82ee', text: 'violet' }
],
custom: true
},
If the list <uicontrol>buttons</uicontrol> is empty (or contains only comments) then the Tiny editors use the colors list from Connections. If you add one or more colors (optionally by removing the comment markers from each desired color in the list), then this list is used instead of the Connections color list. Additional custom colors may be selected from the custom color picker by the end-user when <option>custom</option> is set to <var>true</var>.
- Specifying the color value with tooltip text / translation-key in an
object:
{ value: '#FFF', text: 'white' },.
- Specifying the color value in an object:
`{ value: '#FFF' },`.
- Specifying the color value only:
`'#FFF',`
Procedure
Customize the colors list in the editor by modifying the config.js file as
explained in Customizing the Ephox Editors.