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.