

Color history rows are visible only if there are some colors to show in the history: It adds additional color rows to the color panel, separated from the default palette with a horizontal line. It is active in the editor by default if the Color Button plugin is enabled. You can customize color names to a more user-friendly form by setting custom color names: lorButton_colors = 'skyblue/87CEEB,crimson/DC143C' ĬKEditor 4.15 introduced a new feature: Color History. use the legacy (and not recommended) HTML4 element definition: lorButton_foreStyle = ĬKEditor 4 will then output the color definition as a element with a class, for example: Text By default, the color is added as a element with the style attribute, but you could also e.g.

You can also decide how the color definition is stored by setting the lorButton_foreStyle (for text color) and lorButton_backStyle (for background color) configuration options. Even if you adjust the color list to match the style of your website, your users will be able to arbitrarily apply colors to text elements without any consistency.Ī much better idea for creating semantic content and maintaining consistent styling across your website is to adjust the Styles drop-down list to include some colors that could be applied to user-created content and would still be consistent with your website design. The Text and Background Color feature does not create a semantically meaningful content. These settings will cause the color list to only contain the six colors listed above, with no “Automatic” option available: For example: lorButton_colors = 'CF5D4E,454545,FFF,DDD,CCEAEE,66AB16' Īdditionally, since CKEditor 4.5.8 you can also disable the “Automatic” option by setting the lorButton_enableAutomatic option to false. Use the lorButton_colors configuration option to define a custom list available in the Text Color and Background Color features. You may also want to limit user’s choice of colors to just selected few in order to avoid the overuse of colors. The list of colors available in the color selectors can be customized, for example to include the colors that are used in your website. You can hide the More Colors feature by setting the lorButton_enableMore configuration option to false. When this plugin is enabled, the More Colors option appears automatically for the text and background color. You can also add the optional Color Dialog plugin which extends the color selector with the More Colors option and a user-friendly way to select the desired color through a dedicated Select Color dialog window. If you want to quickly remove colors from your document, use the Remove Format button provided by the Remove Format plugin. When enabled, it adds the Text Color and Background Color toolbar buttons that open a color selection drop-down list. The optional Color Button plugin provides the ability to define the font and background colors for text created in CKEditor 4. You can also add them to your custom build with the online builder.
#COLOR TEXT EDITOR FULL#
So I wanted to see if I could get that working first.This feature is provided through optional plugins that are only included in the Full preset available from the official CKEditor 4 Download site. I was planning on using the Styles/Format dropdown if I couldn't get the color selection working, but just from a user interface perspective I think the color picker seems easier for editors to understand and utilize. It's been a bit of time since I made the edits, but I'm pretty sure those are the only changes I made and they resulted in the sort of display pictured in my screenshot in the initial post. I adjusted the TinyMce editor through the nfig file, adding (if indeed that theoretical colour change ever happened!) whereas, with the rich text editor colour selector, the editor would have to go in and change the colour of the text on every page.
#COLOR TEXT EDITOR UPDATE#
The benefit of that approach is you could change the colours in the stylesheet, and it would update everywhere. you could have a format dropdown called 'important' that added the css class to be text-important, and in the stylesheet for the rich text editor in the backoffice you could make that appear red, and on the design implementation of the site on the published pages. If they wanted to make a line of text red, to highlight some important text then. The other thought is would it be best to use the Styles/Format dropdown instead?Įg are the editors applying colours or meaning to the text? Which made me then wonder if you had configured both? or whether just the textcolor plugin would do what you need: When activated in conjunction with the textcolor plugin it adds a "custom color" button to the text color toolbar dropdown The docs for TinyMce suggest there is a color picker callback that can be implemented, but I'm not sure whether that removes the 'custom' link
