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.

Edit in JSFiddle

HTML

Copy

<div id="froala-editor"></div>

JAVASCRIPT

Copy

<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>