Customize a rich text editor. Toolbar, theme and accent

There are three ways to customize a rich text editor here, and they are not competing. Attributes cover the common cases, a configuration object covers everything, and plain CSS covers anything the first two do not.

The important thing to know is that all three reach the same place. The editor is styled entirely through CSS custom properties on a single root element, so nothing you change is locked inside JavaScript.

The toolbar, by mode or by key

Most pages do not need a full editor. A contact form wants bold, italic and a link, and offering it headings and tables is a worse form rather than a more capable one.

So the toolbar is chosen by named mode rather than by listing every button.

<textarea data-enterraedit data-mode="comment"></textarea>
<textarea data-enterraedit data-mode="full"></textarea>
<textarea data-enterraedit data-toolbar-keys="bold,italic,link"></textarea>

When a mode is close but not right, data-toolbar-keys takes a list instead. A key that does not exist is refused loudly rather than ignored, and the error names the ones that do.

[EnterraEdit] Unknown toolbar key(s): bolrd.
Known keys: bold, italic, underline, strike, link, ...

That is the right way round. A typo that quietly drops a button is a bug report about a missing feature, and a typo that prints the valid keys is a fix in ten seconds.

The theme

Four presets ship, plus one that follows the operating system.

The four are light, dark, sepia and contrast. The fifth is auto, which tracks the system setting rather than reading it once, so a visitor who switches to dark mode in the evening sees the editor change with the rest of their screen.

<textarea data-enterraedit data-theme="dark" data-accent="#345332"></textarea>

new EnterraEdit({ element: el, theme: 'dark' });
new EnterraEdit({ element: el, theme: 'light', accent: '#345332' });
editor.setTheme('sepia');                 // at runtime
editor.setTheme({ '--ee-bg': '#101418' });

The accent color is not one value

This is the part worth understanding, because it is where a hand-rolled theme usually goes wrong.

A single hex has to work as link text, as the tint behind an active button, and as the wash across the toolbar, in whichever mode is currently active. Using the raw value for both modes produces results that look fine in one and are unreadable in the other. A mid-green like #345332 reads well on a light surface and is nearly invisible as link text on a dark one.

So the editor derives the whole family per mode, checking each value against the background it will sit on and nudging it until it clears WCAG AA. The same hex comes out as two different colors, and both are measured.

If you supply an accent and the result does not match the hex you chose, that is why. You set a hue rather than a pair of colors, and the editor picks the readable version for each mode.

When plain CSS is enough

Because a theme is a bag of custom properties on one root element, a stylesheet can restyle anything without touching JavaScript.

.ee-root {
  --ee-focus: rebeccapurple;
  --ee-radius: 0;
}

That is the escape hatch for everything the options do not cover, including a design system that already exists and should not be duplicated in a JavaScript config.

How to customize a rich text editor, and which route to use

Use the attributes if you are dropping the editor onto a field and want to be finished. Use the configuration object if you are building it in JavaScript and already have a variable for the element. Use CSS if the change is visual and the value already exists in your stylesheet.

None of the three is a lesser route, and mixing them is expected rather than a smell. The CDN route uses the same options as any other, so pick whichever you are already using and change the settings after.