# font/utils

module

<a id="constants">

## Constants

<a id="constant-FONT_BACKGROUND_COLOR">

### `FONT_BACKGROUND_COLOR: 'fontBackgroundColor'`

The name of the font background color plugin.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-font/src/utils.ts#L39)

<a id="constant-FONT_COLOR">

### `FONT_COLOR: 'fontColor'`

The name of the font color plugin.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-font/src/utils.ts#L34)

<a id="constant-FONT_FAMILY">

### `FONT_FAMILY: 'fontFamily'`

The name of the font family plugin.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-font/src/utils.ts#L29)

<a id="constant-FONT_SIZE">

### `FONT_SIZE: 'fontSize'`

The name of the font size plugin.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-font/src/utils.ts#L24)

<a id="type-definitions">

## Type Definitions

<a id="typedef-FontColorSelectorDropdownView">

### `FontColorSelectorDropdownView`

<a id="typedef-FontConverterDefinition">

### `FontConverterDefinition`

<a id="functions">

## Functions

<a id="function-addColorSelectorToDropdown">

### `addColorSelectorToDropdown( options = { options.colorPickerLabel, options.colorPickerViewConfig, options.colors, options.columns, options.documentColorsCount?, options.documentColorsLabel?, options.dropdownView, options.removeButtonLabel } ) → ColorSelectorView` _(internal)_

A helper that adds [`ColorSelectorView`](module_ui_colorselector_colorselectorview-ColorSelectorView.md) to the color dropdown with proper initial values.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-font/src/utils.ts#L125)

#### Parameters

* `options: object`

  Configuration options

  Properties

  * `options.colorPickerLabel: string`

    The label for the color picker button.

  * `options.colorPickerViewConfig: false | ColorPickerViewConfig`

    Configuration of the color picker view.

  * `options.colors: Array<ColorDefinition>`

    An array with definitions representing colors to be displayed in the color selector.

  * `options.columns: number`

    The number of columns in the color grid.

  * `options.documentColorsCount?: number`

    The number of document colors inside the dropdown.

  * `options.documentColorsLabel?: string`

    The label for the section with document colors.

  * `options.dropdownView: FontColorSelectorDropdownView`

    The dropdown view to which a [`ColorSelectorView`](module_ui_colorselector_colorselectorview-ColorSelectorView.md) will be added.

  * `options.removeButtonLabel: string`

    The label for the button responsible for removing the color.

#### Returns

* `ColorSelectorView`

  The new color selector view.

<a id="function-buildDefinition">

### `buildDefinition( modelAttributeKey, options ) → FontConverterDefinition` _(internal)_

Builds a proper converter definition out of input data.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-font/src/utils.ts#L46)

#### Parameters

* `modelAttributeKey: string`
* `options: Array<FontFamilyOption> | Array<FontSizeOption>`

#### Returns

* `FontConverterDefinition`

<a id="function-renderDowncastElement">

### `renderDowncastElement( styleAttr ) → ( modelAttributeValue: string, __namedParameters: DowncastConversionApi ) => ViewAttributeElement` _(internal)_

A [font color](module_font_fontcolor-FontColor.md) and [font background color](module_font_fontbackgroundcolor-FontBackgroundColor.md) helper responsible for downcasting a color attribute to a `<span>` element.

**Note**: The `styleAttr` parameter should be either `'color'` or `'background-color'`.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-font/src/utils.ts#L102)

#### Parameters

* `styleAttr: string`

#### Returns

* `( modelAttributeValue: string, __namedParameters: DowncastConversionApi ) => ViewAttributeElement`

<a id="function-renderUpcastAttribute">

### `renderUpcastAttribute( styleAttr ) → ( viewElement: ViewElement ) => string` _(internal)_

A [font color](module_font_fontcolor-FontColor.md) and [font background color](module_font_fontbackgroundcolor-FontBackgroundColor.md) helper responsible for upcasting data to the model.

**Note**: The `styleAttr` parameter should be either `'color'` or `'background-color'`.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-font/src/utils.ts#L89)

#### Parameters

* `styleAttr: string`

#### Returns

* `( viewElement: ViewElement ) => string`

---

Full index of the CKEditor 5 API reference: [llms.txt](llms.txt)