CKEditor SDK

Setting Text and Background Color Documentation

The optional Text and Background Color feature is provided through the Color Button plugin which by default is available in the Full distribution.

When the plugin is enabled, the   and   buttons are automatically added to the toolbar. You can use them to add some color to your content. If you want to quickly remove colors from your document, use the   button provided by the Remove Format plugin.

More Colors Option and Color Dialog

You can also add an optional Color Dialog plugin which provides the More Colors option and a user-friendly way to select the desired color through a dedicated dialog window. The editor instance below includes both features.

Custom Color List

Allowing your users to use any colors they wish might lead to undesired results, i.e. joyfully colorful content that will make your page look like it was created in the early 1990s. You can prevent this situation by customizing the color list to only include a limited number of colors that match your website style. The editor instance below uses the config.colorButton_colors option to trim down the color list to a selected few.

Additionally, since CKEditor 4.5.8 you can also disable the "Automatic" option by setting the config.colorButton_enableAutomatic option to false. The editor instance below includes customizations.

The Text and Background Color feature does not create semantically meaningful content. To create semantic content and also maintain consistent styling across your website, including user-created content, consider configuring the Styles drop-down list to include some colored styles that could be used by your users and would match your website design instead of enabling the Text and Background Color buttons and dealing with a stylistic nightmare later.

Related Features