FontColorConfig (font)

@ckeditor/ckeditor5-font/src/fontconfig

ClassicEditor
	.create( {
		fontColor: ... // Font color feature configuration.
		fontBackgroundColor: ... // Font background color feature configuration.
	} )
	.then( ... )
	.catch( ... );

Properties

• colorPicker : false | ColorPickerConfig | undefinedmodule:font/fontconfig~FontColorConfig#colorPicker

  See source

  Configuration of the color picker feature.

  If set to false the picker will not appear.

• colors : Array<ColorOption> | undefinedmodule:font/fontconfig~FontColorConfig#colors

  See source

  Available font colors defined as an array of strings or objects.

  The default value registers the following colors:

  const fontColorConfig = {
  	colors: [
  		{
  			color: 'hsl(0, 0%, 0%)',
  			label: 'Black'
  		},
  		{
  			color: 'hsl(0, 0%, 30%)',
  			label: 'Dim grey'
  		},
  		{
  			color: 'hsl(0, 0%, 60%)',
  			label: 'Grey'
  		},
  		{
  			color: 'hsl(0, 0%, 90%)',
  			label: 'Light grey'
  		},
  		{
  			color: 'hsl(0, 0%, 100%)',
  			label: 'White',
  			hasBorder: true
  		},
  		{
  			color: 'hsl(0, 75%, 60%)',
  			label: 'Red'
  		},
  		{
  			color: 'hsl(30, 75%, 60%)',
  			label: 'Orange'
  		},
  		{
  			color: 'hsl(60, 75%, 60%)',
  			label: 'Yellow'
  		},
  		{
  			color: 'hsl(90, 75%, 60%)',
  			label: 'Light green'
  		},
  		{
  			color: 'hsl(120, 75%, 60%)',
  			label: 'Green'
  		},
  		{
  			color: 'hsl(150, 75%, 60%)',
  			label: 'Aquamarine'
  		},
  		{
  			color: 'hsl(180, 75%, 60%)',
  			label: 'Turquoise'
  		},
  		{
  			color: 'hsl(210, 75%, 60%)',
  			label: 'Light blue'
  		},
  		{
  			color: 'hsl(240, 75%, 60%)',
  			label: 'Blue'
  		},
  		{
  			color: 'hsl(270, 75%, 60%)',
  			label: 'Purple'
  		}
  	]
  };
  

  Note: The colors are displayed in the 'fontColor' dropdown.

• columns : number | undefinedmodule:font/fontconfig~FontColorConfig#columns

  See source

  Represents the number of columns in the font color dropdown.

  The default value is:

  const fontColorConfig = {
  	columns: 5
  }
  

• documentColors : number | undefinedmodule:font/fontconfig~FontColorConfig#documentColors

  See source

  Determines the maximum number of available document colors. Setting it to 0 will disable the document colors feature.

  By default it equals to the columns value.

  Examples:

  // 1) Neither document colors nor columns are defined in the configuration.
  // Document colors will equal 5,
  // because the value will be inherited from columns,
  // which has a predefined value of 5.
  const fontColorConfig = {}
  
  // 2) Document colors will equal 8, because the value will be inherited from columns.
  const fontColorConfig = {
  	columns: 8
  }
  
  // 3) Document colors will equal 24, because it has its own value defined.
  const fontColorConfig = {
  	columns: 8,
  	documentColors: 24
  }
  
  // 4) The document colors feature will be disabled.
  const fontColorConfig = {
  	columns: 8,
  	documentColors: 0
  }