- 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
Popups
Custom Color Picker
Using the colors.min.js
plugin you can add in the WYSIWYG HTML editor the color picker feature.
Try it yourself:
There are 3 options that can be used to customize the color picker:
- colorsBackground - An array of colors used in the colors popup for background.
- colorsStep - The number of colors displayed on a line in the colors popup.
- colorsText - An array of colors used in the colors popup for text.
HTML
<div id="froala-editor"></div>
JAVASCRIPT
<script>
new FroalaEditor('div#froala-editor', {
toolbarButtons: ['bold', 'italic', 'textColor', 'backgroundColor'],
// Colors list.
colorsBackground: [
'#15E67F', '#E3DE8C', '#D8A076', '#D83762', '#76B6D8', 'REMOVE',
'#1C7A90', '#249CB8', '#4ABED9', '#FBD75B', '#FBE571', '#FFFFFF'
],
colorsStep: 6,
colorsText: [
'#15E67F', '#E3DE8C', '#D8A076', '#D83762', '#76B6D8', 'REMOVE',
'#1C7A90', '#249CB8', '#4ABED9', '#FBD75B', '#FBE571', '#FFFFFF'
]
})
</script>
Related Plugin: Colors