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
    File: 15571