Text and highlight colors

color sets the text color, highlight the background behind the text, like a marker pen. Use them to make a key sentence stand out.

createEditor('#editor', {
  toolbar: 'bold | color highlight',
  colors: ['#000000', '#e03131', '#1c7ed6', '#2b8a3e', '#f08c00'],
});

The palette

• "Automatic" (text) or "None" (highlight) at the top removes the color.
• Colors you use appear in a "Recent" row, up to 8 (kept in this browser's localStorage).
• "Custom" takes a hex code like #1c7ed6 or opens the system color picker.
• The bar under the toolbar button shows the color at the caret.

The colors option replaces the text color palette with your site colors. The same list is used for table cell backgrounds. The highlight button uses its own 13 marker colors.

Presets and phones

color and highlight are on the first row of basic, board and full. On phones the text color is on the main row and highlight is under ⋯. Both are also in the selection toolbar.

Saved HTML

Colors are saved as <span> with a style. Browsers may write hex colors as rgb().

<span style="color: rgb(224, 49, 49)">October 31</span>
<span style="background-color: rgb(255, 243, 191)">Late papers …</span>

API

editor.exec('color', '#e03131');
editor.exec('highlight', '#fff3bf');
editor.exec('color', ''); // remove

Options