### File

`packages/components/externals/eui-editor/eui-editor.component.ts`

### Description

Rich text editor component based on Quill with customizable toolbar and formatting options. Provides WYSIWYG editing capabilities with support for text formatting, images, tables, links, and code blocks. Implements ControlValueAccessor for seamless integration with Angular forms. Supports both HTML and JSON output formats with character and word counting. Commonly used for content management, document editing, comment systems, and rich text input fields. Dependencies: Quill editor library, EuiDialogService for image URL dialogs.

### Implements

`ControlValueAccessor` `OnInit` `OnDestroy` `OnChanges`

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
encapsulation | `ViewEncapsulation.None`
providers | `EuiDialogService`
selector | `eui-editor`
imports | `QuillModule` `NgStyle` `ReactiveFormsModule` `EuiTooltipDirective` `EuiEditorCountersComponent` `EuiEditorJsonViewComponent` `TranslateModule` `forwardRef(() => ClassFilterPipe)` `EUI_ICON`
styleUrls | `./styles/_index.scss`
templateUrl | `./eui-editor.component.html`

### Index

###### Properties

- Public bytesCount
- Public charactersCount
- euiEditorCustomToolbar
- Public formControl
- Public generatedId
- Public isFocused
- Public jsonToHtmlContent
- Public toolbarConfig
- true
- Public value
- Public wordsCount

###### Methods

- Public _onBlur
- Public _onContentChanged
- Public _onEditorCreated
- Public _onFocus
- Public _onSelectionChanged
- Public editorDeleteContent
- Public editorRedo
- Public editorUndo
- Public enableEditorOnFocus
- Public imageUrlHandler
- Public insertTable
- Public registerOnChange
- Public registerOnTouched
- Public writeValue

###### Inputs

- customToolbarConfig
- customToolbarPosition
- debug
- e2eAttr
- format
- formats
- height
- id
- isEnabledOnFocus
- isMinimalToolbar
- isReadOnly
- modules
- placeholder
- showCounters
- tabindex
- theme

###### Outputs

- blur
- charactersCountChange
- contentChange
- editorChange
- editorCreate
- focus
- selectionChange
- wordsCountChange

###### HostBindings

- attr.aria-invalid
- attr.readonly
- class
- class.eui-editor

###### Accessors

- class
- readonly
- isReadOnly
- showCounters
- isEnabledOnFocus
- isMinimalToolbar
- isInvalid
- hasImageFeature
- hasCharactersCounter
- charactersCounterLabel
- hasWordsCounter
- wordsCounterLabel

### Constructor

`constructor()`

### Inputs

customToolbarConfig
Type : `ToolbarItemConfig[]`

customToolbarPosition
Type : `"top" | "bottom"`
Default value : `'top'`

debug
Type : `"warn" | "log" | "error" | unknown`
Default value : `false`

e2eAttr
Type : `string`
Default value : `'eui-editor'`

format
Type : `"html" | "json"`
Default value : `'html'`

formats
Type : `string[] | null`

height
Type : `string`

id
Type : `string`

isEnabledOnFocus
Type : `boolean`
Please check the showcase sample in order to replace this feature using the focus emitter.

isMinimalToolbar
Type : `boolean`

isReadOnly
Type : `boolean`

modules
Type : `QuillModules`

placeholder
Type : `string`
Default value : `''`

showCounters
Type : `boolean`

tabindex
Type : `string`
Default value : `'0'`

theme
Type : `"snow" | "bubble"`
Default value : `'snow'`

### Outputs

blur
Type : `EventEmitter`

charactersCountChange
Type : `EventEmitter`

contentChange
Type : `EventEmitter`

editorChange
Type : `EventEmitter`

editorCreate
Type : `EventEmitter`

focus
Type : `EventEmitter`

selectionChange
Type : `EventEmitter`

wordsCountChange
Type : `EventEmitter`

### HostBindings

attr.aria-invalid
Type : `boolean`

attr.readonly
Type : `string`

class
Type : `string`

class.eui-editor
Type : `boolean`

### Methods

Public _onBlur
`_onBlur(event: Blur)`

Parameters :

Name | Type | Optional
event | `Blur` | No

Returns : `void`

Public _onContentChanged
`_onContentChanged(event: ContentChange)`

Parameters :

Name | Type | Optional
event | `ContentChange` | No

Returns : `void`

Public _onEditorCreated
`_onEditorCreated(quill: unknown)`

Parameters :

Name | Type | Optional
quill | `unknown` | No

Returns : `void`

Public _onFocus
`_onFocus(event: Focus)`

Parameters :

Name | Type | Optional
event | `Focus` | No

Returns : `void`

Public _onSelectionChanged
`_onSelectionChanged(event: SelectionChange)`

Parameters :

Name | Type | Optional
event | `SelectionChange` | No

Returns : `void`

Public editorDeleteContent
`editorDeleteContent()`
Returns : `void`

Public editorRedo
`editorRedo()`
Returns : `void`

Public editorUndo
`editorUndo()`
Returns : `void`

Public enableEditorOnFocus
`enableEditorOnFocus(event: any)`

Parameters :

Name | Type | Optional
event | `any` | No

Returns : `void`

Public imageUrlHandler
`imageUrlHandler()`
Returns : `void`

Public insertTable
`insertTable()`
Returns : `void`

Public registerOnChange
`registerOnChange(fn: any)`

Parameters :

Name | Type | Optional
fn | `any` | No

Returns : `void`

Public registerOnTouched
`registerOnTouched(fn: any)`

Parameters :

Name | Type | Optional
fn | `any` | No

Returns : `void`

Public writeValue
`writeValue(value: string)`

Parameters :

Name | Type | Optional
value | `string` | No

Returns : `void`

### Properties

Public bytesCount
Type : `number`
Default value : `0`

Public charactersCount
Type : `number`
Default value : `0`

euiEditorCustomToolbar
Type : `EuiEditorCustomToolbarTagDirective`
Decorators : `@ContentChild(undefined, {static: false})`

Public formControl
Type : `FormControl`
Default value : `new FormControl()`

Public generatedId
Type : `string`

Public isFocused
Type : `unknown`
Default value : `false`

Public jsonToHtmlContent
Type : `string`

Public toolbarConfig
Type : `literal type`

true
Type : `boolean`
Decorators : `@HostBinding('class.eui-editor')`

Public value
Type : `string | any`
Default value : `''`

Public wordsCount
Type : `number`
Default value : `0`

### Accessors

class
get `class()`

readonly
get `readonly()`

isReadOnly
get `isReadOnly()`
set `isReadOnly(value: BooleanInput)`

Parameters :

Name | Type | Optional
value | `BooleanInput` | No

Returns : `void`

showCounters
get `showCounters()`
set `showCounters(value: BooleanInput)`

Parameters :

Name | Type | Optional
value | `BooleanInput` | No

Returns : `void`

isEnabledOnFocus
get `isEnabledOnFocus()`
Please check the showcase sample in order to replace this feature using the focus emitter. Returns : `boolean`
set `isEnabledOnFocus(value: unknown)`

Parameters :

Name | Type | Optional
value | `unknown` | No

Returns : `void`

isMinimalToolbar
get `isMinimalToolbar()`
set `isMinimalToolbar(value: BooleanInput)`

Parameters :

Name | Type | Optional
value | `BooleanInput` | No

Returns : `void`

isInvalid
get `isInvalid()`
set `isInvalid(value: BooleanInput)`

Parameters :

Name | Type | Optional
value | `BooleanInput` | No

Returns : `void`

hasImageFeature
get `hasImageFeature()`

hasCharactersCounter
get `hasCharactersCounter()`

charactersCounterLabel
get `charactersCounterLabel()`

hasWordsCounter
get `hasWordsCounter()`

wordsCounterLabel
get `wordsCounterLabel()`

# results matching ""

# No results matching ""