Creates an instance of EditableUIView class.
The locale instance.
The editing view instance the editable is related to.
OptionaleditableElement: HTMLElement | ViewRootElementDefinition
The editable element. If an existing HTMLElement is passed, the view applies its
template to it; otherwise the view creates a fresh element (a <div> by default, or one matching the given
module:core/editor/editorconfig~ViewRootElementDefinition).
Protected_The element which is the main editable element (usually the one with contentEditable="true").
Protected_The editing view instance the editable is related to. Editable uses the editing view to dynamically modify its certain DOM attributes after #render rendering.
Note: The DOM attributes are performed by the editing view and not UI module:ui/view~View#bindTemplate template bindings because once rendered, the editable DOM element must remain under the full control of the engine to work properly.
Protected_A collection of view instances, which have been added directly into the module:ui/template~Template#children.
Protected_Collections registered with #createCollection.
An HTML element of the view. null until module:ui/view~View#render rendered
from the module:ui/view~View#template template. The class-level example above illustrates typical usage. The
full description, fenced examples, and assignment note are in the block comment immediately above the element field
in the source.
Controls whether the editable is focused, i.e. the user is typing in it.
Whether this editable is bound to an inline root (a root that only holds inline content, with no block children).
Set by the editor's UI initialization, after plugin schema registrations have settled. When true, a
ck-editor__editable_inline-root CSS class is added to the element so themes can distinguish inline roots from
block ones; the placeholder helper also reads it to decide where to host the placeholder.
ReadonlyisSet true when the view has already been module:ui/view~View#render rendered.
ReadonlylocaleA set of tools to localize the user interface.
Also see module:core/editor/editor~Editor#locale.
The name of the editable UI view.
Shorthand for module:utils/locale~Locale#t.
Note: If #locale instance hasn't been passed to the view this method may not be available.
OptionaltemplateTemplate of this view. It provides the #element representing the view in DOM, which is #render rendered.
OptionalviewShorthand for module:ui/template~Template.bind, a binding module:ui/template~BindChain interface pre–configured for the view instance.
It provides module:ui/template~BindChain#to to() and
module:ui/template~BindChain#if if() methods that initialize bindings with
observable attributes and attach DOM listeners.
class SampleView extends View {
constructor( locale ) {
super( locale );
const bind = this.bindTemplate;
// These {@link module:utils/observablemixin~Observable observable} attributes will control
// the state of the view in DOM.
this.set( {
elementClass: 'foo',
isEnabled: true
} );
this.setTemplate( {
tag: 'p',
attributes: {
// The class HTML attribute will follow elementClass
// and isEnabled view attributes.
class: [
bind.to( 'elementClass' )
bind.if( 'isEnabled', 'present-when-enabled' )
]
},
on: {
// The view will fire the "clicked" event upon clicking <p> in DOM.
click: bind.to( 'clicked' )
}
} );
}
}
Whether an external #_editableElement was passed into the constructor, which also means the view will not render its #template.
Creates a new collection of views, which can be used as module:ui/template~Template#children of this view.
class SampleView extends View {
constructor( locale ) {
super( locale );
const child = new ChildView( locale );
this.items = this.createCollection( [ child ] );
this.setTemplate( {
tag: 'p',
// `items` collection will render here.
children: this.items
} );
}
}
const view = new SampleView( locale );
view.render();
// It will append <p><child#element></p> to the <body>.
document.body.appendChild( view.element );
A new collection of view instances.
The opposite of #registerChild. Removes a child view from this view instance. Once removed, the child is no longer managed by its parent, e.g. it can safely become a child of another parent view.
Child views to be removed.
Recursively destroys the view instance and child views added by #registerChild and residing in collections created by the #createCollection.
Destruction disables all event listeners:
view.on( 'event', () => {} ),module:ui/template~Template.extend Extends the #template of the view with with given definition.
A shorthand for:
Template.extend( view.template, definition );
Note: Is requires the #template to be already set. See #setTemplate.
Definition which extends the #template.
Registers a new child view under the view instance. Once registered, a child view is managed by its parent, including #render rendering and #destroy destruction.
To revert this, use #deregisterChild.
class SampleView extends View {
constructor( locale ) {
super( locale );
this.childA = new SomeChildView( locale );
this.childB = new SomeChildView( locale );
this.setTemplate( { tag: 'p' } );
// Register the children.
this.registerChild( [ this.childA, this.childB ] );
}
render() {
super.render();
this.element.appendChild( this.childA.element );
this.element.appendChild( this.childB.element );
}
}
const view = new SampleView( locale );
view.render();
// Will append <p><childA#element><b></b><childB#element></p>.
document.body.appendChild( view.element );
Note: There's no need to add child views if they're already referenced in the #template:
class SampleView extends View {
constructor( locale ) {
super( locale );
this.childA = new SomeChildView( locale );
this.childB = new SomeChildView( locale );
this.setTemplate( {
tag: 'p',
// These children will be added automatically. There's no
// need to call {@link #registerChild} for any of them.
children: [ this.childA, this.childB ]
} );
}
// ...
}
Children views to be registered.
Renders the view by either applying the #template to the existing module:ui/editableui/editableuiview~EditableUIView#_editableElement or assigning #element as module:ui/editableui/editableuiview~EditableUIView#_editableElement.
Sets the #template of the view with with given definition.
A shorthand for:
view.setTemplate( definition );
Definition of view's template.
The editable UI view class.