Days
Hours
Minutes
Seconds
x

New Advanced File Management – Learn More

Skip to content

Colors Plugin

Adds the possibility to change the background and text colors. You can build your own color palette.


Plugin options:

colorsBackground
Array -
An array of colors used in the colors popup for background. Passing REMOVE as a value in the array will display the Clear Formatting button for colors.
Default:
[
'#61BD6D', '#1ABC9C', '#54ACD2', '#2C82C9', '#9365B8', '#475577', '#CCCCCC',
'#41A85F', '#00A885', '#3D8EB9', '#2969B0', '#553982', '#28324E', '#000000',
'#F7DA64', '#FBA026', '#EB6B56', '#E25041', '#A38F84', '#EFEFEF', '#FFFFFF',,
'#FAC51C', '#F37934', '#D14841', '#B8312F', '#7C706B', '#D1D5D8', 'REMOVE'
]
colorsButtons
Array -
Set the colors popup buttons.
Default: ["colorsBack", "|", "-"]
colorsHEXInput
Boolean -
Show HEX input to choose custom color.
Default: true
colorsStep
Number -
The number of colors displayed on a line in the colors popup.
Default: 7
colorsText
Array -
An array of colors used in the colors popup for text. Passing REMOVE as a value in the array will display the Clear Formatting button for colors.
Default:

[ '#61BD6D', '#1ABC9C', '#54ACD2', '#2C82C9', '#9365B8', '#475577', '#CCCCCC',
'#41A85F', '#00A885', '#3D8EB9', '#2969B0', '#553982', '#28324E', '#000000',
'#F7DA64', '#FBA026', '#EB6B56', '#E25041', '#A38F84', '#EFEFEF', '#FFFFFF',
'#FAC51C', '#F37934', '#D14841', '#B8312F', '#7C706B', '#D1D5D8', 'REMOVE'
]

Plugin methods:

colors.background (value)
returns: Object
Set the background color of the selected text.
● Value: The color to be set.
Type: String
colors.text (value)
returns: Object
Set the text color of the selected text.
● Value: The color to be set.
Type: String
colors.back ()
returns:
Hides the color picker popup.

Add Plugin to your code:

Plugin name: colors

Plugin JS Script: ../js/plugins/colors.min.js

Or from CDN https://cdn.jsdelivr.net/npm/froala-editor@latest/js/plugins/colors.min.js

Plugin CSS link: ../css/plugins/colors.min.css

Or from CDN https://cdn.jsdelivr.net/npm/froala-editor@latest/css/plugins/colors.min.css


Example:

● Custom Color Picker

Ready to dive in ? Explore our plans