An original service notice uses dark red for an overdue action and dark blue for a contact detail. The wording still says “Return by Friday” and “Contact the service desk.” Readers need those instructions even if color is unavailable or the notice is printed in grayscale.
Configure the available authoring choices
In an application that already installs CKEditor 5, import FontColor from ckeditor5, add it to the existing plugin list, and merge these options:
const serviceNoticeColorOptions = {
toolbar: [ 'undo', 'redo', '|', 'fontColor' ],
fontColor: {
colors: [
{ color: '#8B1E2D', label: 'Action red' },
{ color: '#174B73', label: 'Contact blue' },
{ color: '#202020', label: 'Body text' }
],
columns: 3,
documentColors: 0,
colorPicker: false
}
};
Retain the real application's other toolbar controls, styles, and license configuration rather than replacing the entire setup with this fragment. The three colors are an illustrative notice palette, not a claim that they meet every background or accessibility requirement.
documentColors: 0 hides the section containing colors already found in the document. colorPicker: false removes the custom picker. Neither option cleans old documents or validates incoming HTML. Existing content can still contain colors outside this palette through a separate import or data path.
Apply color to the intended words
Select “Return by Friday” before choosing Action red. Then select “Contact the service desk” and choose Contact blue. Inspect the surrounding sentence after each change. A collapsed selection can affect subsequent typing rather than recoloring the phrase the author intended.
For an application's existing initialized editor and preserved selection, a custom control can invoke:
editor.execute('fontColor', { value: '#8B1E2D' });
editor.editing.view.focus();
The command operates on the current editor selection. A custom external button must preserve or deliberately restore that selection; the color value does not identify a phrase. To remove the font color from the current selection, the feature documents executing the command without a value:
editor.execute('fontColor');
editor.editing.view.focus();
Removing a font color lets the surrounding content style determine the result. It need not produce a black inline style. Keep the application's normal text readable through its inherited styles.
Separate color choices from color enforcement
The font feature represents text color using inline spans with a color style. Save current data through the application's real persistence path, then reopen the same notice and inspect the final reader view. If the style survives in editor.getData() but disappears from the saved page, inspect the server or renderer transformation between those points.
If your application requires a strict approved palette, enforce that policy at the relevant input and storage boundaries too. The dropdown is an authoring interface. It does not establish a security boundary, reject an API client's arbitrary style, or retroactively convert an imported document.
Decide what should happen to an older orange warning: preserve it, map it to an approved color, or flag it for review. Make that decision explicitly before a migration changes existing notices.
Review the notice against its real background
Check the colored phrases in both the editor and reader. A palette that looks acceptable on white may fail against a tinted notice panel. Use the actual foreground and background when evaluating contrast, and preserve a written action or contact label alongside the color.
The CKEditor document editor guide covers the current-value save path. The source editing guide helps distinguish supported color formatting from unrelated imported styles that the editor does not retain.
Before issuing the service notice, select the deadline, change its color, undo, and redo. Save and reopen it. Read the instruction without relying on its color: “Return by Friday” must remain complete, and the contact phrase must still identify where to ask for help.