- Getting Started
- Browser Support
- Languages Support
- Shortcuts
- Activation
- Examples
- Customize the Editor
- Use-cases
- Plugins
- APIs
- Development Frameworks
- Server Integrations
- Server SDKs
- Migration Guides
- Changelog
- Tutorials
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