# ViewUIElement class UI element class. It should be used to represent editing UI which needs to be injected into the editing view If possible, you should keep your UI outside the editing view. However, if that is not possible, UI elements can be used. How a UI element is rendered is in your control (you pass a callback to [`downcastWriter#createUIElement()`](module_engine_view_downcastwriter-ViewDowncastWriter.md#function-createUIElement)). The editor will ignore your UI element – the selection cannot be placed in it, it is skipped (invisible) when the user modifies the selection by using arrow keys and the editor does not listen to any mutations which happen inside your UI elements. The limitation is that you cannot convert a model element to a UI element. UI elements need to be created for [markers](module_engine_model_markercollection-Marker.md) or as additinal elements inside normal [container elements](module_engine_view_containerelement-ViewContainerElement.md). To create a new UI element use the [`downcastWriter#createUIElement()`](module_engine_view_downcastwriter-ViewDowncastWriter.md#function-createUIElement) method. [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/uielement.ts#L42) ## Properties ### `_classes: ViewTokenList | undefined` _(readonly)_ Set of classes associated with element instance. Note that this is just an alias for `this._attrs.get( 'class' );` [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/element.ts#L86) ### `_styles: StylesMap | undefined` _(readonly)_ Normalized styles. Note that this is just an alias for `this._attrs.get( 'style' );` [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/element.ts#L95) ### `childCount: number` _(readonly)_ Number of element's children. [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/element.ts#L137) ### `document: ViewDocument` _(readonly)_ The document instance to which this node belongs. [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/node.ts#L36) ### `index: number | null` _(readonly)_ Index of the node in the parent element or null if the node has no parent. Accessing this property throws an error if this node's parent element does not contain it. This means that view tree got broken. [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/node.ts#L61) ### `isEmpty: boolean` _(readonly)_ Is `true` if there are no nodes inside this element, `false` otherwise. [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/element.ts#L144) ### `name: string` _(readonly)_ Name of the element. [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/element.ts#L50) ### `nextSibling: ViewNode | null` _(readonly)_ Node's next sibling, or `null` if it is the last child. [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/node.ts#L84) ### `parent: ViewElement | ViewDocumentFragment | null` _(readonly)_ Parent element. Null by default. Set by [`_insertChild`](module_engine_view_element-ViewElement.md#function-_insertChild). [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/node.ts#L41) ### `previousSibling: ViewNode | null` _(readonly)_ Node's previous sibling, or `null` if it is the first child. [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/node.ts#L93) ### `root: ViewElement | ViewDocumentFragment` _(readonly)_ Top-most ancestor of the node. If the node has no parent it is the root itself. [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/node.ts#L102) ### `_unsafeAttributesToRender: Array` _(internal)_ A list of attribute names that should be rendered in the editing pipeline even though filtering mechanisms implemented in the [`ViewDomConverter`](module_engine_view_domconverter-ViewDomConverter.md) (for instance, [`shouldRenderAttribute`](module_engine_view_domconverter-ViewDomConverter.md#function-shouldRenderAttribute)) would filter them out. These attributes can be specified as an option when the element is created by the [`ViewDowncastWriter`](module_engine_view_downcastwriter-ViewDowncastWriter.md). To check whether an unsafe an attribute should be permitted, use the [`shouldRenderUnsafeAttribute`](#function-shouldRenderUnsafeAttribute) method. [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/element.ts#L63) ## Methods ### `constructor( document, name, attrs?, children? )` _(internal)_ Creates new instance of UIElement. Throws [CKEditorError](module_utils_ckeditorerror-CKEditorError.md) `view-uielement-cannot-add` when third parameter is passed, to inform that usage of UIElement is incorrect (adding child nodes to UIElement is forbidden). [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/uielement.ts#L56) #### Parameters * `document: ViewDocument` The document instance to which this element belongs. * `name: string` Node name. * `attrs?: ViewElementAttributes` Collection of attributes. * `children?: ViewNode | Iterable` A list of nodes to be inserted into created element. #### Related: * [ViewDowncastWriter#createUIElement](module_engine_view_downcastwriter-ViewDowncastWriter.md#function-createUIElement) ### `delegate( events ) → EmitterMixinDelegateChain` _(inherited)_ Delegates selected events to another [`Emitter`](module_utils_emittermixin-Emitter.md). For instance: ```typescript emitterA.delegate( 'eventX' ).to( emitterB ); emitterA.delegate( 'eventX', 'eventY' ).to( emitterC ); ``` then `eventX` is delegated (fired by) `emitterB` and `emitterC` along with `data`: ```typescript emitterA.fire( 'eventX', data ); ``` and `eventY` is delegated (fired by) `emitterC` along with `data`: ```typescript emitterA.fire( 'eventY', data ); ``` [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-utils/src/emittermixin.ts#L539) #### Parameters * `events: Array` Event names that will be delegated to another emitter. #### Returns * `EmitterMixinDelegateChain` ### `findAncestor( patterns ) → ViewElement | null` _(inherited)_ Returns ancestor element that match specified pattern. Provided patterns should be compatible with [Matcher](module_engine_view_matcher-Matcher.md) as it is used internally. [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/element.ts#L427) #### Parameters * `patterns: Array boolean>` Patterns used to match correct ancestor. See [`Matcher`](module_engine_view_matcher-Matcher.md). #### Returns * `ViewElement | null` Found element or `null` if no matching ancestor was found. #### Related: * [Matcher](module_engine_view_matcher-Matcher.md) ### `fire( eventOrInfo, args ) → GetEventInfo[ 'return' ]` _(inherited)_ Fires an event, executing all callbacks registered for it. The first parameter passed to callbacks is an [`EventInfo`](module_utils_eventinfo-EventInfo.md) object, followed by the optional `args` provided in the `fire()` method call. [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-utils/src/emittermixin.ts#L512) #### Type parameters * `TEvent: extends BaseEvent` The type describing the event. See [`BaseEvent`](module_utils_emittermixin-BaseEvent.md). #### Parameters * `eventOrInfo: GetNameOrEventInfo` The name of the event or `EventInfo` object if event is delegated. * `args: TEvent[ 'args' ]` Additional arguments to be passed to the callbacks. #### Returns * `GetEventInfo[ 'return' ]` By default the method returns `undefined`. However, the return value can be changed by listeners through modification of the [`evt.return`](module_utils_eventinfo-EventInfo.md#member-return)'s property (the event info is the first param of every callback). ### `getAncestors( options = { options.includeSelf?, options.parentFirst? } ) → Array` _(inherited)_ Returns ancestors array of this node. [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/node.ts#L159) #### Parameters * `options: object` Options object. Properties * `options.includeSelf?: boolean` When set to `true` this node will be also included in parent's array. * `options.parentFirst?: boolean` When set to `true`, array will be sorted from node's parent to root element, otherwise root element will be the first item in the array. Defaults to `{}` #### Returns * `Array` Array with ancestors. ### `getAttribute( key ) → string | undefined` _(inherited)_ Gets attribute by key. If attribute is not present - returns undefined. [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/element.ts#L219) #### Parameters * `key: string` Attribute key. #### Returns * `string | undefined` Attribute value. ### `getAttributeKeys() → IterableIterator` _(inherited)_ Returns an iterator that contains the keys for attributes. Order of inserting attributes is not preserved. [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/element.ts#L182) #### Returns * `IterableIterator` Keys for attributes. ### `getAttributes() → IterableIterator<[ string, string ]>` _(inherited)_ Returns iterator that iterates over this element's attributes. Attributes are returned as arrays containing two items. First one is attribute key and second is attribute value. This format is accepted by native `Map` object and also can be passed in `Node` constructor. [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/element.ts#L207) #### Returns * `IterableIterator<[ string, string ]>` ### `getChild( index ) → ViewNode | undefined` _(inherited)_ Gets child at the given index. [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/element.ts#L154) #### Parameters * `index: number` Index of child. #### Returns * `ViewNode | undefined` Child node. ### `getChildIndex( node ) → number` _(inherited)_ Gets index of the given child node. Returns `-1` if child node is not found. [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/element.ts#L164) #### Parameters * `node: ViewNode` Child node. #### Returns * `number` Index of the child node. ### `getChildren() → IterableIterator` _(inherited)_ Gets child nodes iterator. [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/element.ts#L173) #### Returns * `IterableIterator` Child nodes iterator. ### `getClassNames() → IterableIterator` _(inherited)_ Returns iterator that contains all class names. [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/element.ts#L313) #### Returns * `IterableIterator` ### `getCommonAncestor( node, options = { options.includeSelf? } ) → ViewElement | ViewDocumentFragment | null` _(inherited)_ Returns a [`ViewElement`](module_engine_view_element-ViewElement.md) or [`ViewDocumentFragment`](module_engine_view_documentfragment-ViewDocumentFragment.md) which is a common ancestor of both nodes. [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/node.ts#L180) #### Parameters * `node: ViewNode` The second node. * `options: object` Options object. Properties * `options.includeSelf?: boolean` When set to `true` both nodes will be considered "ancestors" too. Which means that if e.g. node A is inside B, then their common ancestor will be B. Defaults to `{}` #### Returns * `ViewElement | ViewDocumentFragment | null` ### `getCustomProperties() → IterableIterator<[ string | symbol, unknown ]>` _(inherited)_ Returns an iterator which iterates over this element's custom properties. Iterator provides `[ key, value ]` pairs for each stored property. [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/element.ts#L453) #### Returns * `IterableIterator<[ string | symbol, unknown ]>` ### `getCustomProperty( key ) → unknown` _(inherited)_ Returns the custom property value for the given key. [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/element.ts#L445) #### Parameters * `key: string | symbol` #### Returns * `unknown` ### `getFillerOffset() → number | null` _(inherited)_ Returns block [filler](module_engine_view_filler.md) offset or `null` if block filler is not needed. [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/element.ts#L1185) #### Returns * `number | null` ### `getIdentity() → string` _(inherited)_ Returns identity string based on element's name, styles, classes and other attributes. Two elements that [are similar](#function-isSimilar) will have same identity string. It has the following format: ```typescript 'name class="class1,class2" style="style1:value1;style2:value2" attr1="val1" attr2="val2"' ``` * For example: ```typescript const element = writer.createContainerElement( 'foo', { banana: '10', apple: '20', style: 'color: red; border-color: white;', class: 'baz' } ); // returns 'foo class="baz" style="border-color:white;color:red" apple="20" banana="10"' element.getIdentity(); ``` **Note**: Classes, styles and other attributes are sorted alphabetically. [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/element.ts#L482) #### Returns * `string` ### `getNormalizedStyle( property ) → StyleValue | undefined` _(inherited)_ Returns a normalized style object or single style value. For an element with style set to: margin:1px 2px 3em; ```typescript element.getNormalizedStyle( 'margin' ) ); ``` will return: ```typescript { top: '1px', right: '2px', bottom: '3em', left: '2px' // a normalized value from margin shorthand } ``` and reading for single style value: ```typescript styles.getNormalizedStyle( 'margin-left' ); ``` Will return a `2px` string. **Note**: This method will return normalized values only if [a particular style processor rule is enabled](module_engine_controller_datacontroller-DataController.md#function-addStyleProcessorRules). See [`StylesMap#getNormalized()`](module_engine_view_stylesmap-StylesMap.md#function-getNormalized) for details. [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/element.ts#L387) #### Parameters * `property: string` Name of CSS property #### Returns * `StyleValue | undefined` ### `getPath() → Array` _(inherited)_ Gets a path to the node. The path is an array containing indices of consecutive ancestors of this node, beginning from [root](module_engine_view_node-ViewNode.md#member-root), down to this node's index. ```typescript const abc = downcastWriter.createText( 'abc' ); const foo = downcastWriter.createText( 'foo' ); const h1 = downcastWriter.createElement( 'h1', null, downcastWriter.createText( 'header' ) ); const p = downcastWriter.createElement( 'p', null, [ abc, foo ] ); const div = downcastWriter.createElement( 'div', null, [ h1, p ] ); foo.getPath(); // Returns [ 1, 3 ]. `foo` is in `p` which is in `div`. `p` starts at offset 1, while `foo` at 3. h1.getPath(); // Returns [ 0 ]. div.getPath(); // Returns []. ``` [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/node.ts#L137) #### Returns * `Array` The path. ### `getStyle( property ) → string | undefined` _(inherited)_ Returns style value for the given property name. If the style does not exist `undefined` is returned. **Note**: This method can work with normalized style names if [a particular style processor rule is enabled](module_engine_controller_datacontroller-DataController.md#function-addStyleProcessorRules). See [`StylesMap#getAsString()`](module_engine_view_stylesmap-StylesMap.md#function-getAsString) for details. For an element with style set to `'margin:1px'`: ```typescript // Enable 'margin' shorthand processing: editor.data.addStyleProcessorRules( addMarginStylesRules ); const element = view.change( writer => { const element = writer.createElement(); writer.setStyle( 'margin', '1px' ); writer.setStyle( 'margin-bottom', '3em' ); return element; } ); element.getStyle( 'margin' ); // -> 'margin: 1px 1px 3em;' ``` [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/element.ts#L349) #### Parameters * `property: string` #### Returns * `string | undefined` ### `getStyleNames( expand? ) → Array` _(inherited)_ Returns an array that contains all style names. [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/element.ts#L396) #### Parameters * `expand?: boolean` Expand shorthand style properties and return all equivalent style representations. #### Returns * `Array` ### `hasAttribute( key, token? ) → boolean` _(inherited)_ Returns a boolean indicating whether an attribute with the specified key exists in the element. [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/element.ts#L229) #### Parameters * `key: string` Attribute key. * `token?: string` #### Returns * `boolean` `true` if attribute with the specified key exists in the element, `false` otherwise. ### `hasClass( className ) → boolean` _(inherited)_ Returns true if class is present. If more then one class is provided - returns true only when all classes are present. ```typescript element.hasClass( 'foo' ); // Returns true if 'foo' class is present. element.hasClass( 'foo', 'bar' ); // Returns true if 'foo' and 'bar' classes are both present. ``` [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/element.ts#L300) #### Parameters * `className: Array` #### Returns * `boolean` ### `hasStyle( property ) → boolean` _(inherited)_ Returns true if style keys are present. If more then one style property is provided - returns true only when all properties are present. ```typescript element.hasStyle( 'color' ); // Returns true if 'border-top' style is present. element.hasStyle( 'color', 'border-top' ); // Returns true if 'color' and 'border-top' styles are both present. ``` [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/element.ts#L409) #### Parameters * `property: Array` #### Returns * `boolean` ### `is( type ) → this is ViewElement | ViewAttributeElement | ViewContainerElement | ViewEditableElement | ViewEmptyElement | ViewRawElement | ViewRootEditableElement | ViewUIElement` _(inherited)_ Checks whether this object is of type [`ViewElement`](module_engine_view_element-ViewElement.md) or its subclass. ```typescript element.is( 'element' ); // -> true element.is( 'node' ); // -> true element.is( 'view:element' ); // -> true element.is( 'view:node' ); // -> true element.is( 'model:element' ); // -> false element.is( 'documentSelection' ); // -> false ``` Assuming that the object being checked is an element, you can also check its [name](module_engine_view_element-ViewElement.md#member-name): ```typescript element.is( 'element', 'img' ); // -> true if this is an element text.is( 'element', 'img' ); -> false ``` [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/typecheckable.ts#L93) #### Parameters * `type: 'element' | 'view:element'` #### Returns * `this is ViewElement | ViewAttributeElement | ViewContainerElement | ViewEditableElement | ViewEmptyElement | ViewRawElement | ViewRootEditableElement | ViewUIElement` ### `is( type ) → this is ViewAttributeElement` _(inherited)_ Checks whether this object is of type [`ViewAttributeElement`](module_engine_view_attributeelement-ViewAttributeElement.md). ```typescript attributeElement.is( 'attributeElement' ); // -> true attributeElement.is( 'element' ); // -> true attributeElement.is( 'node' ); // -> true attributeElement.is( 'view:attributeElement' ); // -> true attributeElement.is( 'view:element' ); // -> true attributeElement.is( 'view:node' ); // -> true attributeElement.is( 'model:element' ); // -> false attributeElement.is( 'documentFragment' ); // -> false ``` Assuming that the object being checked is an attribute element, you can also check its [name](module_engine_view_attributeelement-ViewAttributeElement.md#member-name): ```typescript attributeElement.is( 'element', 'b' ); // -> true if this is a bold element attributeElement.is( 'attributeElement', 'b' ); // -> same as above text.is( 'element', 'b' ); -> false ``` [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/typecheckable.ts#L130) #### Parameters * `type: 'attributeElement' | 'view:attributeElement'` #### Returns * `this is ViewAttributeElement` ### `is( type ) → this is ViewContainerElement | ViewEditableElement | ViewRootEditableElement` _(inherited)_ Checks whether this object is of type [`ViewContainerElement`](module_engine_view_containerelement-ViewContainerElement.md) or its subclass. ```typescript containerElement.is( 'containerElement' ); // -> true containerElement.is( 'element' ); // -> true containerElement.is( 'node' ); // -> true containerElement.is( 'view:containerElement' ); // -> true containerElement.is( 'view:element' ); // -> true containerElement.is( 'view:node' ); // -> true containerElement.is( 'model:element' ); // -> false containerElement.is( 'documentFragment' ); // -> false ``` Assuming that the object being checked is a container element, you can also check its [name](module_engine_view_containerelement-ViewContainerElement.md#member-name): ```typescript containerElement.is( 'element', 'div' ); // -> true if this is a div container element containerElement.is( 'contaienrElement', 'div' ); // -> same as above text.is( 'element', 'div' ); -> false ``` [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/typecheckable.ts#L158) #### Parameters * `type: 'containerElement' | 'view:containerElement'` #### Returns * `this is ViewContainerElement | ViewEditableElement | ViewRootEditableElement` ### `is( type ) → this is ViewRawElement` _(inherited)_ Checks whether this object is of type [`ViewRawElement`](module_engine_view_rawelement-ViewRawElement.md). ```typescript rawElement.is( 'rawElement' ); // -> true rawElement.is( 'element' ); // -> true rawElement.is( 'node' ); // -> true rawElement.is( 'view:rawElement' ); // -> true rawElement.is( 'view:element' ); // -> true rawElement.is( 'view:node' ); // -> true rawElement.is( 'model:element' ); // -> false rawElement.is( 'documentFragment' ); // -> false ``` Assuming that the object being checked is a raw element, you can also check its [name](module_engine_view_rawelement-ViewRawElement.md#member-name): ```typescript rawElement.is( 'img' ); // -> true if this is an img element rawElement.is( 'rawElement', 'img' ); // -> same as above text.is( 'img' ); -> false ``` [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/typecheckable.ts#L243) #### Parameters * `type: 'rawElement' | 'view:rawElement'` #### Returns * `this is ViewRawElement` ### `is( type ) → this is ViewEmptyElement` _(inherited)_ Checks whether this object is of type [`ViewEmptyElement`](module_engine_view_emptyelement-ViewEmptyElement.md). ```typescript emptyElement.is( 'emptyElement' ); // -> true emptyElement.is( 'element' ); // -> true emptyElement.is( 'node' ); // -> true emptyElement.is( 'view:emptyElement' ); // -> true emptyElement.is( 'view:element' ); // -> true emptyElement.is( 'view:node' ); // -> true emptyElement.is( 'model:element' ); // -> false emptyElement.is( 'documentFragment' ); // -> false ``` Assuming that the object being checked is an empty element, you can also check its [name](module_engine_view_emptyelement-ViewEmptyElement.md#member-name): ```typescript emptyElement.is( 'element', 'img' ); // -> true if this is a img element emptyElement.is( 'emptyElement', 'img' ); // -> same as above text.is( 'element', 'img' ); -> false ``` [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/typecheckable.ts#L215) #### Parameters * `type: 'emptyElement' | 'view:emptyElement'` #### Returns * `this is ViewEmptyElement` ### `is( type ) → this is ViewEditableElement | ViewRootEditableElement` _(inherited)_ Checks whether this object is of type [`ViewEditableElement`](module_engine_view_editableelement-ViewEditableElement.md) or its subclass. ```typescript editableElement.is( 'editableElement' ); // -> true editableElement.is( 'element' ); // -> true editableElement.is( 'node' ); // -> true editableElement.is( 'view:editableElement' ); // -> true editableElement.is( 'view:element' ); // -> true editableElement.is( 'view:node' ); // -> true editableElement.is( 'model:element' ); // -> false editableElement.is( 'documentFragment' ); // -> false ``` Assuming that the object being checked is an editbale element, you can also check its [name](module_engine_view_editableelement-ViewEditableElement.md#member-name): ```typescript editableElement.is( 'element', 'div' ); // -> true if this is a div element editableElement.is( 'editableElement', 'div' ); // -> same as above text.is( 'element', 'div' ); -> false ``` [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/typecheckable.ts#L187) #### Parameters * `type: 'editableElement' | 'view:editableElement'` #### Returns * `this is ViewEditableElement | ViewRootEditableElement` ### `is( type ) → this is ViewTextProxy` _(inherited)_ Checks whether this object is of type [`ViewTextProxy`](module_engine_view_textproxy-ViewTextProxy.md). ```typescript textProxy.is( '$textProxy' ); // -> true textProxy.is( 'view:$textProxy' ); // -> true textProxy.is( 'model:$textProxy' ); // -> false textProxy.is( 'element' ); // -> false textProxy.is( 'range' ); // -> false ``` **Note:** Until version 20.0.0 this method wasn't accepting `'$textProxy'` type. The legacy `'textProxy'` type is still accepted for backward compatibility. [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/typecheckable.ts#L353) #### Parameters * `type: '$textProxy' | 'view:$textProxy'` #### Returns * `this is ViewTextProxy` ### `is( type ) → this is ViewSelection | ViewDocumentSelection` _(inherited)_ Checks whether this object is of type [`ViewSelection`](module_engine_view_selection-ViewSelection.md) or [`ViewDocumentSelection`](module_engine_view_documentselection-ViewDocumentSelection.md). ```typescript selection.is( 'selection' ); // -> true selection.is( 'view:selection' ); // -> true selection.is( 'model:selection' ); // -> false selection.is( 'element' ); // -> false selection.is( 'range' ); // -> false ``` [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/typecheckable.ts#L402) #### Parameters * `type: 'selection' | 'view:selection'` #### Returns * `this is ViewSelection | ViewDocumentSelection` ### `is( type ) → this is ViewRange` _(inherited)_ Checks whether this object is of type [`ViewRange`](module_engine_view_range-ViewRange.md). ```typescript range.is( 'range' ); // -> true range.is( 'view:range' ); // -> true range.is( 'model:range' ); // -> false range.is( 'element' ); // -> false range.is( 'selection' ); // -> false ``` [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/typecheckable.ts#L385) #### Parameters * `type: 'range' | 'view:range'` #### Returns * `this is ViewRange` ### `is( type ) → this is ViewPosition` _(inherited)_ Checks whether this object is of type [`ViewPosition`](module_engine_view_position-ViewPosition.md). ```typescript position.is( 'position' ); // -> true position.is( 'view:position' ); // -> true position.is( 'model:position' ); // -> false position.is( 'element' ); // -> false position.is( 'range' ); // -> false ``` [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/typecheckable.ts#L369) #### Parameters * `type: 'position' | 'view:position'` #### Returns * `this is ViewPosition` ### `is( type ) → this is ViewDocumentFragment` _(inherited)_ hecks whether this object is of type [`ViewDocumentFragment`](module_engine_view_documentfragment-ViewDocumentFragment.md). ```typescript docFrag.is( 'documentFragment' ); // -> true docFrag.is( 'view:documentFragment' ); // -> true docFrag.is( 'model:documentFragment' ); // -> false docFrag.is( 'element' ); // -> false docFrag.is( 'node' ); // -> false ``` [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/typecheckable.ts#L334) #### Parameters * `type: 'documentFragment' | 'view:documentFragment'` #### Returns * `this is ViewDocumentFragment` ### `is( type ) → this is ViewText` _(inherited)_ Checks whether this object is of type [`ViewText`](module_engine_view_text-ViewText.md). ```typescript text.is( '$text' ); // -> true text.is( 'node' ); // -> true text.is( 'view:$text' ); // -> true text.is( 'view:node' ); // -> true text.is( 'model:$text' ); // -> false text.is( 'element' ); // -> false text.is( 'range' ); // -> false ``` [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/typecheckable.ts#L318) #### Parameters * `type: '$text' | 'view:$text'` #### Returns * `this is ViewText` ### `is( type ) → this is ViewUIElement` _(inherited)_ Checks whether this object is of type [`ViewUIElement`](module_engine_view_uielement-ViewUIElement.md). ```typescript uiElement.is( 'uiElement' ); // -> true uiElement.is( 'element' ); // -> true uiElement.is( 'node' ); // -> true uiElement.is( 'view:uiElement' ); // -> true uiElement.is( 'view:element' ); // -> true uiElement.is( 'view:node' ); // -> true uiElement.is( 'model:element' ); // -> false uiElement.is( 'documentFragment' ); // -> false ``` Assuming that the object being checked is an ui element, you can also check its [name](#member-name): ```typescript uiElement.is( 'element', 'span' ); // -> true if this is a span ui element uiElement.is( 'uiElement', 'span' ); // -> same as above text.is( 'element', 'span' ); -> false ``` [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/typecheckable.ts#L300) #### Parameters * `type: 'uiElement' | 'view:uiElement'` #### Returns * `this is ViewUIElement` ### `is( type ) → this is ViewRootEditableElement` _(inherited)_ Checks whether this object is of type [`ViewRootEditableElement`](module_engine_view_rooteditableelement-ViewRootEditableElement.md). ```typescript rootEditableElement.is( 'rootElement' ); // -> true rootEditableElement.is( 'editableElement' ); // -> true rootEditableElement.is( 'element' ); // -> true rootEditableElement.is( 'node' ); // -> true rootEditableElement.is( 'view:editableElement' ); // -> true rootEditableElement.is( 'view:element' ); // -> true rootEditableElement.is( 'view:node' ); // -> true rootEditableElement.is( 'model:element' ); // -> false rootEditableElement.is( 'documentFragment' ); // -> false ``` Assuming that the object being checked is a root editable element, you can also check its [name](module_engine_view_rooteditableelement-ViewRootEditableElement.md#member-name): ```typescript rootEditableElement.is( 'element', 'div' ); // -> true if this is a div root editable element rootEditableElement.is( 'rootElement', 'div' ); // -> same as above text.is( 'element', 'div' ); -> false ``` [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/typecheckable.ts#L272) #### Parameters * `type: 'rootElement' | 'view:rootElement'` #### Returns * `this is ViewRootEditableElement` ### `is( type ) → this is ViewDocumentSelection` _(inherited)_ Checks whether this object is of type [`ViewDocumentSelection`](module_engine_view_documentselection-ViewDocumentSelection.md). ```typescript `docSelection.is( 'selection' ); // -> true docSelection.is( 'documentSelection' ); // -> true docSelection.is( 'view:selection' ); // -> true docSelection.is( 'view:documentSelection' ); // -> true docSelection.is( 'model:documentSelection' ); // -> false docSelection.is( 'element' ); // -> false docSelection.is( 'node' ); // -> false ``` [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/typecheckable.ts#L420) #### Parameters * `type: 'documentSelection' | 'view:documentSelection'` #### Returns * `this is ViewDocumentSelection` ### `is( type, name ) → boolean` _(inherited)_ Checks whether the object is of type [`ViewEditableElement`](module_engine_view_editableelement-ViewEditableElement.md) or its subclass and has the specified `name`. [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/typecheckable.ts#L463) #### Type parameters * `N: extends string` #### Parameters * `type: 'editableElement' | 'view:editableElement'` * `name: N` #### Returns * `boolean` ### `is( type, name ) → boolean` _(inherited)_ Checks whether the object is of type [`ViewUIElement`](module_engine_view_uielement-ViewUIElement.md) and has the specified `name`. [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/typecheckable.ts#L495) #### Type parameters * `N: extends string` #### Parameters * `type: 'uiElement' | 'view:uiElement'` * `name: N` #### Returns * `boolean` ### `is( type, name ) → boolean` _(inherited)_ Checks whether the object is of type [`ViewRootEditableElement`](module_engine_view_rooteditableelement-ViewRootEditableElement.md) and has the specified `name`. [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/typecheckable.ts#L488) #### Type parameters * `N: extends string` #### Parameters * `type: 'rootElement' | 'view:rootElement'` * `name: N` #### Returns * `boolean` ### `is( type, name ) → boolean` _(inherited)_ Checks whether the object is of type [`ViewRawElement`](module_engine_view_rawelement-ViewRawElement.md) and has the specified `name`. [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/typecheckable.ts#L480) #### Type parameters * `N: extends string` #### Parameters * `type: 'rawElement' | 'view:rawElement'` * `name: N` #### Returns * `boolean` ### `is( type, name ) → boolean` _(inherited)_ Checks whether the object is of type [`ViewEmptyElement`](module_engine_view_emptyelement-ViewEmptyElement.md) has the specified `name`. [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/typecheckable.ts#L473) #### Type parameters * `N: extends string` #### Parameters * `type: 'emptyElement' | 'view:emptyElement'` * `name: N` #### Returns * `boolean` ### `is( type, name ) → boolean` _(inherited)_ Checks whether the object is of type [`ViewContainerElement`](module_engine_view_containerelement-ViewContainerElement.md) or its subclass and has the specified `name`. [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/typecheckable.ts#L451) #### Type parameters * `N: extends string` #### Parameters * `type: 'containerElement' | 'view:containerElement'` * `name: N` #### Returns * `boolean` ### `is( type, name ) → boolean` _(inherited)_ Checks whether the object is of type [`ViewAttributeElement`](module_engine_view_attributeelement-ViewAttributeElement.md) and has the specified `name`. [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/typecheckable.ts#L443) #### Type parameters * `N: extends string` #### Parameters * `type: 'attributeElement' | 'view:attributeElement'` * `name: N` #### Returns * `boolean` ### `is( type, name ) → boolean` _(inherited)_ Checks whether the object is of type [`ViewElement`](module_engine_view_element-ViewElement.md) or its subclass and has the specified `name`. [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/typecheckable.ts#L427) #### Type parameters * `N: extends string` #### Parameters * `type: 'element' | 'view:element'` * `name: N` #### Returns * `boolean` ### `is( type ) → this is ViewText | ViewNode | ViewElement | ViewAttributeElement | ViewContainerElement | ViewEditableElement | ViewEmptyElement | ViewRawElement | ViewRootEditableElement | ViewUIElement` _(inherited)_ Checks whether this object is of type [`ViewNode`](module_engine_view_node-ViewNode.md) or its subclass. This method is useful when processing view objects that are of unknown type. For example, a function may return a [`ViewDocumentFragment`](module_engine_view_documentfragment-ViewDocumentFragment.md) or a [`ViewNode`](module_engine_view_node-ViewNode.md) that can be either a text node or an element. This method can be used to check what kind of object is returned. ```typescript someObject.is( 'element' ); // -> true if this is an element someObject.is( 'node' ); // -> true if this is a node (a text node or an element) someObject.is( 'documentFragment' ); // -> true if this is a document fragment ``` Since this method is also available on a range of model objects, you can prefix the type of the object with `model:` or `view:` to check, for example, if this is the model's or view's element: ```typescript viewElement.is( 'view:element' ); // -> true viewElement.is( 'model:element' ); // -> false ``` By using this method it is also possible to check a name of an element: ```typescript imgElement.is( 'element', 'img' ); // -> true imgElement.is( 'view:element', 'img' ); // -> same as above, but more precise ``` [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/typecheckable.ts#L57) #### Parameters * `type: 'node' | 'view:node'` #### Returns * `this is ViewText | ViewNode | ViewElement | ViewAttributeElement | ViewContainerElement | ViewEditableElement | ViewEmptyElement | ViewRawElement | ViewRootEditableElement | ViewUIElement` ### `isAfter( node ) → boolean` _(inherited)_ Returns whether this node is after given node. `false` is returned if nodes are in different trees (for example, in different [`ViewDocumentFragment`](module_engine_view_documentfragment-ViewDocumentFragment.md)s). [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/node.ts#L233) #### Parameters * `node: ViewNode` Node to compare with. #### Returns * `boolean` ### `isAttached() → boolean` _(inherited)_ Returns true if the node is in a tree rooted in the document (is a descendant of one of its roots). [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/node.ts#L116) #### Returns * `boolean` ### `isBefore( node ) → boolean` _(inherited)_ Returns whether this node is before given node. `false` is returned if nodes are in different trees (for example, in different [`ViewDocumentFragment`](module_engine_view_documentfragment-ViewDocumentFragment.md)s). [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/node.ts#L199) #### Parameters * `node: ViewNode` Node to compare with. #### Returns * `boolean` ### `isSimilar( otherElement ) → boolean` _(inherited)_ Checks if this element is similar to other element. Both elements should have the same name and attributes to be considered as similar. Two similar elements can contain different set of children nodes. [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/element.ts#L250) #### Parameters * `otherElement: ViewItem` #### Returns * `boolean` ### `listenTo( emitter, event, callback, options? ) → void` _(inherited)_ Registers a callback function to be executed when an event is fired in a specific (emitter) object. Events can be grouped in namespaces using `:`. When namespaced event is fired, it additionally fires all callbacks for that namespace. ```typescript // myEmitter.on( ... ) is a shorthand for myEmitter.listenTo( myEmitter, ... ). myEmitter.on( 'myGroup', genericCallback ); myEmitter.on( 'myGroup:myEvent', specificCallback ); // genericCallback is fired. myEmitter.fire( 'myGroup' ); // both genericCallback and specificCallback are fired. myEmitter.fire( 'myGroup:myEvent' ); // genericCallback is fired even though there are no callbacks for "foo". myEmitter.fire( 'myGroup:foo' ); ``` An event callback can [stop the event](module_utils_eventinfo-EventInfo.md#member-stop) and set the [return value](module_utils_eventinfo-EventInfo.md#member-return) of the [`fire`](#function-fire) method. [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-utils/src/emittermixin.ts#L475) #### Type parameters * `TEvent: extends BaseEvent` The type describing the event. See [`BaseEvent`](module_utils_emittermixin-BaseEvent.md). #### Parameters * `emitter: Emitter` The object that fires the event. * `event: TEvent[ 'name' ]` The name of the event. * `callback: GetCallback` The function to be called on event. * `options?: GetCallbackOptions` Additional options. #### Returns * `void` ### `off( event, callback ) → void` _(inherited)_ Stops executing the callback on the given event. Shorthand for [`this.stopListening( this, event, callback )`](#function-stopListening:BASE_STOP). [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-utils/src/emittermixin.ts#L444) #### Parameters * `event: string` The name of the event. * `callback: Function` The function to stop being called. #### Returns * `void` ### `on( event, callback, options? ) → void` _(inherited)_ Registers a callback function to be executed when an event is fired. Shorthand for [`this.listenTo( this, event, callback, options )`](#function-listenTo:BASE_EMITTER) (it makes the emitter listen on itself). [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-utils/src/emittermixin.ts#L416) #### Type parameters * `TEvent: extends BaseEvent` The type descibing the event. See [`BaseEvent`](module_utils_emittermixin-BaseEvent.md). #### Parameters * `event: TEvent[ 'name' ]` The name of the event. * `callback: GetCallback` The function to be called on event. * `options?: GetCallbackOptions` Additional options. #### Returns * `void` ### `once( event, callback, options? ) → void` _(inherited)_ Registers a callback function to be executed on the next time the event is fired only. This is similar to calling [`on`](#function-on) followed by [`off`](#function-off) in the callback. [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-utils/src/emittermixin.ts#L431) #### Type parameters * `TEvent: extends BaseEvent` The type descibing the event. See [`BaseEvent`](module_utils_emittermixin-BaseEvent.md). #### Parameters * `event: TEvent[ 'name' ]` The name of the event. * `callback: GetCallback` The function to be called on event. * `options?: GetCallbackOptions` Additional options. #### Returns * `void` ### `render( domDocument, domConverter ) → HTMLElement` Renders this [`ViewUIElement`](module_engine_view_uielement-ViewUIElement.md) to DOM. This method is called by [`ViewDomConverter`](module_engine_view_domconverter-ViewDomConverter.md). Do not use inheritance to create custom rendering method, replace `render()` method instead: ```typescript const myUIElement = downcastWriter.createUIElement( 'span' ); myUIElement.render = function( domDocument, domConverter ) { const domElement = this.toDomElement( domDocument ); domConverter.setContentOf( domElement, 'this is ui element' ); return domElement; }; ``` If changes in your UI element should trigger some editor UI update you should call the [`editor.ui.update()`](module_ui_editorui_editorui-EditorUI.md#function-update) method after rendering your UI element. [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/uielement.ts#L109) #### Parameters * `domDocument: Document` * `domConverter: ViewDomConverter` Instance of the ViewDomConverter used to optimize the output. #### Returns * `HTMLElement` ### `shouldRenderUnsafeAttribute( attributeName ) → boolean` _(inherited)_ Decides whether an unsafe attribute is whitelisted and should be rendered in the editing pipeline even though filtering mechanisms like [`shouldRenderAttribute`](module_engine_view_domconverter-ViewDomConverter.md#function-shouldRenderAttribute) say it should not. Unsafe attribute names can be specified when creating an element via [`ViewDowncastWriter`](module_engine_view_downcastwriter-ViewDowncastWriter.md). [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/element.ts#L504) #### Parameters * `attributeName: string` The name of the attribute to be checked. #### Returns * `boolean` ### `stopDelegating( event?, emitter? ) → void` _(inherited)_ Stops delegating events. It can be used at different levels: * To stop delegating all events. * To stop delegating a specific event to all emitters. * To stop delegating a specific event to a specific emitter. [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-utils/src/emittermixin.ts#L552) #### Parameters * `event?: string` The name of the event to stop delegating. If omitted, stops it all delegations. * `emitter?: Emitter` (requires `event`) The object to stop delegating a particular event to. If omitted, stops delegation of `event` to all emitters. #### Returns * `void` ### `stopListening( emitter?, event?, callback? ) → void` _(inherited)_ Stops listening for events. It can be used at different levels: * To stop listening to a specific callback. * To stop listening to a specific event. * To stop listening to all events fired by a specific object. * To stop listening to all events fired by all objects. [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-utils/src/emittermixin.ts#L497) #### Parameters * `emitter?: Emitter` The object to stop listening to. If omitted, stops it for all objects. * `event?: string` (Requires the `emitter`) The name of the event to stop listening to. If omitted, stops it for all events from `emitter`. * `callback?: Function` (Requires the `event`) The function to be removed from the call list for the given `event`. #### Returns * `void` ### `toDomElement( domDocument ) → HTMLElement` Creates DOM element based on this view UIElement. Note that each time this method is called new DOM element is created. [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/uielement.ts#L121) #### Parameters * `domDocument: Document` #### Returns * `HTMLElement` ### `toJSON() → unknown` Converts `ViewUIElement` instance to plain object and returns it. [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/uielement.ts#L136) #### Returns * `unknown` `ViewUIElement` instance converted to plain object. ### `_addClass( className ) → void` _(internal)_ Adds specified class. ```typescript element._addClass( 'foo' ); // Adds 'foo' class. element._addClass( [ 'foo', 'bar' ] ); // Adds 'foo' and 'bar' classes. ``` [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/element.ts#L728) #### Parameters * `className: ArrayOrItem` #### Returns * `void` #### Fires * [change](#event-change) #### Related: * [ViewDowncastWriter#addClass](module_engine_view_downcastwriter-ViewDowncastWriter.md#function-addClass) ### `_appendChild( items ) → number` _(internal)_ [Insert](module_engine_view_element-ViewElement.md#function-_insertChild) a child node or a list of child nodes at the end of this node and sets the parent of these nodes to this element. [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/element.ts#L578) #### Parameters * `items: string | ViewItem | Iterable<( string | ViewItem )>` Items to be inserted. #### Returns * `number` Number of appended nodes. #### Fires * [change](#event-change) #### Related: * [ViewDowncastWriter#insert](module_engine_view_downcastwriter-ViewDowncastWriter.md#function-insert) ### `_canMergeAttributesFrom( otherElement ) → boolean` _(internal)_ Verify if the given element can be merged without conflicts into the element. Note that this method is extended by the [`ViewAttributeElement`](module_engine_view_attributeelement-ViewAttributeElement.md) implementation. This method is used by the [`ViewDowncastWriter`](module_engine_view_downcastwriter-ViewDowncastWriter.md) while down-casting an [`ViewAttributeElement`](module_engine_view_attributeelement-ViewAttributeElement.md) to merge it with other ViewAttributeElement. [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/element.ts#L1002) #### Parameters * `otherElement: ViewElement` #### Returns * `boolean` Returns `true` if elements can be merged. ### `_canSubtractAttributesOf( otherElement ) → boolean` _(internal)_ Verify if the given element attributes can be fully subtracted from the element. Note that this method is extended by the [`ViewAttributeElement`](module_engine_view_attributeelement-ViewAttributeElement.md) implementation. This method is used by the [`ViewDowncastWriter`](module_engine_view_downcastwriter-ViewDowncastWriter.md) while down-casting an [`ViewAttributeElement`](module_engine_view_attributeelement-ViewAttributeElement.md) to unwrap the ViewAttributeElement. [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/element.ts#L1065) #### Parameters * `otherElement: ViewElement` #### Returns * `boolean` Returns `true` if elements attributes can be fully subtracted. ### `_clone( deep ) → this` _(internal)_ Clones provided element. [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/element.ts#L542) #### Parameters * `deep: boolean` If set to `true` clones element and all its children recursively. When set to `false`, element will be cloned without any children. Defaults to `false` #### Returns * `this` Clone of this element. ### `_collectAttributesMatch( patterns, match, exclude? ) → boolean` _(internal)_ Used by the [Matcher](module_engine_view_matcher-Matcher.md) to collect matching attribute tuples (attribute name and optional token). Normalized patterns can be used in following ways: * to match any attribute name with any or no value: ```typescript patterns: [ [ true, true ] ] ``` * to match a specific attribute with any value: ```typescript patterns: [ [ 'required', true ] ] ``` * to match an attribute name with a RegExp with any value: ```typescript patterns: [ [ /h[1-6]/, true ] ] ``` ``` - to match a specific attribute with the exact value: ``` ```typescript patterns: [ [ 'rel', 'nofollow' ] ] ``` ``` - to match a specific attribute with a value matching a RegExp: ``` ```typescript patterns: [ [ 'src', /^https/ ] ] ``` ``` - to match an attribute name with a RegExp and the exact value: ``` ```typescript patterns: [ [ /^data-property-/, 'foobar' ], ] ``` ``` - to match an attribute name with a RegExp and match a value with another RegExp: ``` ```typescript patterns: [ [ /^data-property-/, /^foo/ ] ] ``` ``` - to match a specific style property with the value matching a RegExp: ``` ```typescript patterns: [ [ 'style', 'font-size', /px$/ ] ] ``` ``` - to match a specific class (class attribute is tokenized so it matches tokens individually): ``` ```typescript patterns: [ [ 'class', 'foo' ] ] ``` [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/element.ts#L901) #### Parameters * `patterns: Array` An array of normalized patterns (tuples of 2 or 3 items depending on if tokenized attribute value match is needed). * `match: Array<[ string, string? ]>` An array to populate with matching tuples. * `exclude?: Array` Array of attribute names to exclude from match. #### Returns * `boolean` `true` if element matches all patterns. The matching tuples are pushed to the `match` array. ### `_fireChange( type, node, data? = { data.index } ) → void` _(internal)_ [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/node.ts#L264) #### Parameters * `type: ViewDocumentChangeType` Type of the change. * `node: ViewNode` Changed node. * `data?: object` Additional data. Properties * `data.index: number` #### Returns * `void` #### Fires * [change](#event-change) ### `_getConsumables( key?, token? ) → ViewNormalizedConsumables` _(internal)_ Used by the [`ViewConsumable`](module_engine_conversion_viewconsumable-ViewConsumable.md) to collect the [`ViewNormalizedConsumables`](module_engine_view_element-ViewNormalizedConsumables.md) for the element. When `key` and `token` parameters are provided the output is filtered for the specified attribute and it's tokens and related tokens. [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/element.ts#L958) #### Parameters * `key?: string` Attribute name. * `token?: string` Reference token to collect all related tokens. #### Returns * `ViewNormalizedConsumables` ### `_insertChild( index, items ) → number` _(internal)_ Overrides [`_insertChild`](module_engine_view_element-ViewElement.md#function-_insertChild) method. Throws [CKEditorError](module_utils_ckeditorerror-CKEditorError.md) `view-uielement-cannot-add` to prevent adding any child nodes to UIElement. [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/uielement.ts#L74) #### Parameters * `index: number` * `items: ViewItem | Iterable` #### Returns * `number` ### `_mergeAttributesFrom( otherElement ) → void` _(internal)_ Merges attributes of a given element into the element. This includes also tokenized attributes like style and class. Note that you should make sure there are no conflicts before merging (see [`_canMergeAttributesFrom`](#function-_canMergeAttributesFrom)). This method is used by the [`ViewDowncastWriter`](module_engine_view_downcastwriter-ViewDowncastWriter.md) while down-casting an [`ViewAttributeElement`](module_engine_view_attributeelement-ViewAttributeElement.md) to merge it with other ViewAttributeElement. [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/element.ts#L1038) #### Parameters * `otherElement: ViewElement` #### Returns * `void` ### `_remove() → void` _(internal)_ Removes node from parent. [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/node.ts#L253) #### Returns * `void` ### `_removeAttribute( key, tokens? ) → boolean` _(internal)_ Removes attribute from the element. [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/element.ts#L690) #### Parameters * `key: string` Attribute key. * `tokens?: ArrayOrItem` Attribute value tokens to remove. The whole attribute is removed if not specified. #### Returns * `boolean` Returns true if an attribute existed and has been removed. #### Fires * [change](#event-change) #### Related: * [ViewDowncastWriter#removeAttribute](module_engine_view_downcastwriter-ViewDowncastWriter.md#function-removeAttribute) ### `_removeChildren( index, howMany ) → Array` _(internal)_ Removes number of child nodes starting at the given index and set the parent of these nodes to `null`. [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/element.ts#L626) #### Parameters * `index: number` Number of the first node to remove. * `howMany: number` Number of nodes to remove. Defaults to `1` #### Returns * `Array` The array of removed nodes. #### Fires * [change](#event-change) #### Related: * [ViewDowncastWriter#remove](module_engine_view_downcastwriter-ViewDowncastWriter.md#function-remove) ### `_removeClass( className ) → void` _(internal)_ Removes specified class. ```typescript element._removeClass( 'foo' ); // Removes 'foo' class. element._removeClass( [ 'foo', 'bar' ] ); // Removes both 'foo' and 'bar' classes. ``` [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/element.ts#L744) #### Parameters * `className: ArrayOrItem` #### Returns * `void` #### Fires * [change](#event-change) #### Related: * [ViewDowncastWriter#removeClass](module_engine_view_downcastwriter-ViewDowncastWriter.md#function-removeClass) ### `_removeCustomProperty( key ) → boolean` _(internal)_ Removes the custom property stored under the given key. [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/element.ts#L1139) #### Parameters * `key: string | symbol` #### Returns * `boolean` Returns true if property was removed. #### Related: * [ViewDowncastWriter#removeCustomProperty](module_engine_view_downcastwriter-ViewDowncastWriter.md#function-removeCustomProperty) ### `_removeStyle( property ) → void` _(internal)_ Removes specified style. ```typescript element._removeStyle( 'color' ); // Removes 'color' style. element._removeStyle( [ 'color', 'border-top' ] ); // Removes both 'color' and 'border-top' styles. ``` **Note**: This method can work with normalized style names if [a particular style processor rule is enabled](module_engine_controller_datacontroller-DataController.md#function-addStyleProcessorRules). See [`StylesMap#remove()`](module_engine_view_stylesmap-StylesMap.md#function-remove) for details. [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/element.ts#L814) #### Parameters * `property: ArrayOrItem` #### Returns * `void` #### Fires * [change](#event-change) #### Related: * [ViewDowncastWriter#removeStyle](module_engine_view_downcastwriter-ViewDowncastWriter.md#function-removeStyle) ### `_setAttribute( key, value, overwrite ) → void` _(internal)_ Adds or overwrite attribute with a specified key and value. [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/element.ts#L646) #### Parameters * `key: string` Attribute key. * `value: unknown` Attribute value. * `overwrite: boolean` Whether tokenized attribute should override the attribute value or just add a token. Defaults to `true` #### Returns * `void` #### Fires * [change](#event-change) #### Related: * [ViewDowncastWriter#setAttribute](module_engine_view_downcastwriter-ViewDowncastWriter.md#function-setAttribute) ### `_setCustomProperty( key, value ) → void` _(internal)_ Sets a custom property. Unlike attributes, custom properties are not rendered to the DOM, so they can be used to add special data to elements. [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/element.ts#L1128) #### Parameters * `key: string | symbol` * `value: unknown` #### Returns * `void` #### Related: * [ViewDowncastWriter#setCustomProperty](module_engine_view_downcastwriter-ViewDowncastWriter.md#function-setCustomProperty) ### `_setStyle( properties ) → void` _(internal)_ Adds style to the element. ```typescript element._setStyle( { color: 'red', position: 'fixed' } ); ``` **Note**: This method can work with normalized style names if [a particular style processor rule is enabled](module_engine_controller_datacontroller-DataController.md#function-addStyleProcessorRules). See [`StylesMap#set()`](module_engine_view_stylesmap-StylesMap.md#function-set:KEY_VALUE) for details. [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/element.ts#L788) #### Parameters * `properties: Record` Object with key - value pairs. #### Returns * `void` #### Fires * [change](#event-change) #### Related: * [ViewDowncastWriter#setStyle](module_engine_view_downcastwriter-ViewDowncastWriter.md#function-setStyle:KEY_VALUE) ### `_setStyle( property, value ) → void` _(internal)_ Adds style to the element. ```typescript element._setStyle( 'color', 'red' ); ``` **Note**: This method can work with normalized style names if [a particular style processor rule is enabled](module_engine_controller_datacontroller-DataController.md#function-addStyleProcessorRules). See [`StylesMap#set()`](module_engine_view_stylesmap-StylesMap.md#function-set:KEY_VALUE) for details. [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/element.ts#L766) #### Parameters * `property: string` Property name. * `value: StyleValue` Value to set. #### Returns * `void` #### Fires * [change](#event-change) #### Related: * [ViewDowncastWriter#setStyle](module_engine_view_downcastwriter-ViewDowncastWriter.md#function-setStyle:KEY_VALUE) ### `_subtractAttributesOf( otherElement ) → void` _(internal)_ Removes (subtracts) corresponding attributes of the given element from the element. This includes also tokenized attributes like style and class. All attributes, classes and styles from given element should be present inside the element being unwrapped. Note that you should make sure all attributes could be subtracted before subtracting them (see [`_canSubtractAttributesOf`](#function-_canSubtractAttributesOf)). This method is used by the [`ViewDowncastWriter`](module_engine_view_downcastwriter-ViewDowncastWriter.md) while down-casting an [`ViewAttributeElement`](module_engine_view_attributeelement-ViewAttributeElement.md) to unwrap the ViewAttributeElement. [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/element.ts#L1102) #### Parameters * `otherElement: ViewElement` #### Returns * `void` ## Events ### `change( eventInfo, changedNode, data? )` _(inherited)_ Fired when list of [elements](module_engine_view_element-ViewElement.md) children, attributes or text changes. Change event is bubbled – it is fired on all ancestors. All change events as the first parameter receive the node that has changed (the node for which children, attributes or text changed). If `change:children` event is fired, there is an additional second parameter, which is an object with additional data related to change. [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/node.ts#L326) #### Parameters * `eventInfo: EventInfo` An object containing information about the fired event. * `changedNode: ViewNode` * `data?: object` ### `change:attributes( eventInfo, changedNode, data? )` _(inherited)_ Fired when list of [elements](module_engine_view_element-ViewElement.md) children, attributes or text changes. Change event is bubbled – it is fired on all ancestors. All change events as the first parameter receive the node that has changed (the node for which children, attributes or text changed). If `change:children` event is fired, there is an additional second parameter, which is an object with additional data related to change. [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/node.ts#L326) #### Parameters * `eventInfo: EventInfo` An object containing information about the fired event. * `changedNode: ViewNode` * `data?: object` ### `change:children( eventInfo, changedNode, data? )` _(inherited)_ Fired when list of [elements](module_engine_view_element-ViewElement.md) children, attributes or text changes. Change event is bubbled – it is fired on all ancestors. All change events as the first parameter receive the node that has changed (the node for which children, attributes or text changed). If `change:children` event is fired, there is an additional second parameter, which is an object with additional data related to change. [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/node.ts#L326) #### Parameters * `eventInfo: EventInfo` An object containing information about the fired event. * `changedNode: ViewNode` * `data?: object` ### `change:text( eventInfo, changedNode, data? )` _(inherited)_ Fired when list of [elements](module_engine_view_element-ViewElement.md) children, attributes or text changes. Change event is bubbled – it is fired on all ancestors. All change events as the first parameter receive the node that has changed (the node for which children, attributes or text changed). If `change:children` event is fired, there is an additional second parameter, which is an object with additional data related to change. [See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/node.ts#L326) #### Parameters * `eventInfo: EventInfo` An object containing information about the fired event. * `changedNode: ViewNode` * `data?: object` --- Full index of the CKEditor 5 API reference: [llms.txt](llms.txt)