Enabling Color Picker in HTML RTE Area of Typo3

By default the color picker woudl be enabled in the Typo3 RTE. However, on some cases this may be disabled. Here is a quick overview on how to re-enable it in such cases.

  1. You are unable to see the color picker, that means you need to add it to the list of available buttons.
    This can be done by adding “textcolor” to the list of existing buttons in showButtons property.
    ex:
    RTE.default.showButtons = ………….. textstyle, bold, italic, textcolor
    (NOTE: The order here is not important)
  2. You should also remove the “textcolor” from the list of buttons in the hideButtons property. i.e. from RTE.default.showButtons =
  3. Place the “textcolor” button in a suitable place of your preference using the toolbarOrder property.
    ex:
    RTE.default.toolbarOrder = …. space, textstyle, textcolor, …etc….
  4. Check if color picker is enabled or not, by making sure that “disableColorPicker” is set to 0
    ex:
    RTE.default.disableColorPicker = 0
  5. RTE might use the font tag to set colors, we can make sure that this does not happen by addin the font tag to the list of tags to be removed.
    ex:
    RTE.default.removeTags = font
  6. After following step 5, the font tags are no longer used for specifying font colors, hence we should make sure to set the useCSS property to true, otherwise the colors would not appear on the front-end, nor they are saved.
    ex:
    RTE.default.useCSS = 1
    (NOTE: If you wish to use font tags for text coloring thisfeature need not be set)

    Hope these steps would be helpful to you!

Additional Notes:
The above steps are sometimes just not enough and you also need to make sure that the property “[allowStyleAttribute]” is enabled in the rtehtmlarea Extension’s configuration as shown in the screenshot.

An issue Related Typo3 Update:

  • When typo3 is upgraded from 4.2 to 4.3 no matter what we do, colorpicker just does not get displayed.
    To solve this you will need to remove the rtehtmlarea config array in the localconf.php manually!
    – Just delete the line $TYPO3_CONF_VARS[‘EXT’][‘extConf’][‘rtehtmlarea’] = ……etc….
    – Go to rtehtmlarea configuration in Extension manager and click “Update” to save the new config.
    This should now make the textcolor to appear again.