Color Input

This is a new color input element that can be defined in the dialog definition.

  • Use getValue, setValue, setup, commit, just like you would with a text input.
  • Three layouts: expanded, compact, or minimal.
  • All layouts use and depend on the color dialog plugin.
  • Extract to your plugins directory and add the 'colorinput' plugin.
  • Add type: "color" elements to your dialogs. Example:
CKEDITOR.dialog.add('colorinputdialog', function(editor) {
    return {
        title: 'Color Input View',
        contents: [{
            id: 'info',
            label: 'Info',
            elements: [{
                id: 'color',
                type: 'color',
                'default': 'red', //optional
                layout: 'expanded', // optional: 'expanded' (default), 'compact', or 'minimal'
                label: 'Background Color'




3,738 downloads (view stats)


Plugin versions CKEditor versions
4.16 4.15 4.14

Version: 1.0.3

DownloadRelease notes

  • Bug fix: default settings were not persisted when opening the dialog on a second element
  • New editor config option: colorInputLayout. Sets the default layout of all color inputs in the editor. Layouts set in the input definition will override this setting.
  • New tests for default settings.
Twitter Facebook Facebook Instagram Medium Linkedin GitHub Arrow down Phone Menu Close icon Check