packages/components/externals/eui-editor/eui-editor.component.ts
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.
ControlValueAccessor
OnInit
OnDestroy
OnChanges
| 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 |
Properties |
|
Methods |
|
Inputs |
Outputs |
HostBindings |
Accessors |
constructor()
|
| 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'
|
| blur |
Type : EventEmitter
|
| charactersCountChange |
Type : EventEmitter
|
| contentChange |
Type : EventEmitter
|
| editorChange |
Type : EventEmitter
|
| editorCreate |
Type : EventEmitter
|
| focus |
Type : EventEmitter
|
| selectionChange |
Type : EventEmitter
|
| wordsCountChange |
Type : EventEmitter
|
| attr.aria-invalid |
Type : boolean
|
| attr.readonly |
Type : string
|
| class |
Type : string
|
| class.eui-editor |
Type : boolean
|
| Public _onBlur | ||||||
_onBlur(event: Blur)
|
||||||
|
Parameters :
Returns :
void
|
| Public _onContentChanged | ||||||
_onContentChanged(event: ContentChange)
|
||||||
|
Parameters :
Returns :
void
|
| Public _onEditorCreated | ||||||
_onEditorCreated(quill: unknown)
|
||||||
|
Parameters :
Returns :
void
|
| Public _onFocus | ||||||
_onFocus(event: Focus)
|
||||||
|
Parameters :
Returns :
void
|
| Public _onSelectionChanged | ||||||
_onSelectionChanged(event: SelectionChange)
|
||||||
|
Parameters :
Returns :
void
|
| Public editorDeleteContent |
editorDeleteContent()
|
|
Returns :
void
|
| Public editorRedo |
editorRedo()
|
|
Returns :
void
|
| Public editorUndo |
editorUndo()
|
|
Returns :
void
|
| Public enableEditorOnFocus | ||||||
enableEditorOnFocus(event: any)
|
||||||
|
Parameters :
Returns :
void
|
| Public imageUrlHandler |
imageUrlHandler()
|
|
Returns :
void
|
| Public insertTable |
insertTable()
|
|
Returns :
void
|
| Public registerOnChange | ||||||
registerOnChange(fn: any)
|
||||||
|
Parameters :
Returns :
void
|
| Public registerOnTouched | ||||||
registerOnTouched(fn: any)
|
||||||
|
Parameters :
Returns :
void
|
| Public writeValue | ||||||
writeValue(value: string)
|
||||||
|
Parameters :
Returns :
void
|
| 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
|
| class |
getclass()
|
| readonly |
getreadonly()
|
| isReadOnly | ||||||
getisReadOnly()
|
||||||
setisReadOnly(value: BooleanInput)
|
||||||
|
Parameters :
Returns :
void
|
| showCounters | ||||||
getshowCounters()
|
||||||
setshowCounters(value: BooleanInput)
|
||||||
|
Parameters :
Returns :
void
|
| isEnabledOnFocus | ||||||
getisEnabledOnFocus()
|
||||||
|
Please check the showcase sample in order to replace this feature using the focus emitter.
Returns :
boolean
|
||||||
setisEnabledOnFocus(value: unknown)
|
||||||
|
Parameters :
Returns :
void
|
| isMinimalToolbar | ||||||
getisMinimalToolbar()
|
||||||
setisMinimalToolbar(value: BooleanInput)
|
||||||
|
Parameters :
Returns :
void
|
| isInvalid | ||||||
getisInvalid()
|
||||||
setisInvalid(value: BooleanInput)
|
||||||
|
Parameters :
Returns :
void
|
| hasImageFeature |
gethasImageFeature()
|
| hasCharactersCounter |
gethasCharactersCounter()
|
| charactersCounterLabel |
getcharactersCounterLabel()
|
| hasWordsCounter |
gethasWordsCounter()
|
| wordsCounterLabel |
getwordsCounterLabel()
|