InlineEditorUI (editor-inline)

@ckeditor/ckeditor5-editor-inline/src/inlineeditorui

Properties

• readonly inherited

  componentFactory : ComponentFactorymodule:editor-inline/inlineeditorui~InlineEditorUI#componentFactory

  See source

  An instance of the ComponentFactory, a registry used by plugins to register factories of specific UI components.

• readonly inherited

  editor : Editormodule:editor-inline/inlineeditorui~InlineEditorUI#editor

  See source

  The editor that the UI belongs to.

• readonly inherited

  element : HTMLElement | nullmodule:editor-inline/inlineeditorui~InlineEditorUI#element

  See source

  The main (outermost) DOM element of the editor UI.

  For example, in ClassicEditor it is a <div> which wraps the editable element and the toolbar. In InlineEditor it is the editable element itself (as there is no other wrapper). However, in DecoupledEditor it is set to null because this editor does not come with a single "main" HTML element (its editable element and toolbar are separate).

  This property can be understood as a shorthand for retrieving the element that a specific editor integration considers to be its main DOM element.

• readonly inherited

  focusTracker : FocusTrackermodule:editor-inline/inlineeditorui~InlineEditorUI#focusTracker

  See source

  Stores the information about the editor UI focus and propagates it so various plugins and components are unified as a focus group.

• readonly inherited

  isReady : Booleanmodule:editor-inline/inlineeditorui~InlineEditorUI#isReady

  See source

  Indicates the UI is ready. Set true after event-ready event is fired.

  Defaults to false

• readonly inherited

  tooltipManager : TooltipManagermodule:editor-inline/inlineeditorui~InlineEditorUI#tooltipManager

  See source

  Manages the tooltips displayed on mouseover and focus across the UI.

• readonly

  view : EditorUIViewmodule:editor-inline/inlineeditorui~InlineEditorUI#view

  See source

  The main (top–most) view of the editor UI.

• inherited observable

  viewportOffset : Objectmodule:editor-inline/inlineeditorui~InlineEditorUI#viewportOffset

  See source

  Stores viewport offsets from every direction.

  Viewport offset can be used to constrain balloons or other UI elements into an element smaller than the viewport. This can be useful if there are any other absolutely positioned elements that may interfere with editor UI.

  Example editor.ui.viewportOffset returns:

  {
  	top: 50,
  	right: 50,
  	bottom: 50,
  	left: 50
  }
  

  This property can be overriden after editor already being initialized:

  editor.ui.viewportOffset = {
  	top: 100,
  	right: 0,
  	bottom: 0,
  	left: 0
  };
  

• deprecated protected inherited

  _editableElements : Map.<String, HTMLElement>module:editor-inline/inlineeditorui~InlineEditorUI#_editableElements

  See source

  Stores all editable elements used by the editor instance.

• private inherited

  _editableElementsMap : Map.<String, HTMLElement>module:editor-inline/inlineeditorui~InlineEditorUI#_editableElementsMap

  See source

  Stores all editable elements used by the editor instance.

• private inherited

  _focusableToolbarDefinitions : Array.<FocusableToolbarDefinition>module:editor-inline/inlineeditorui~InlineEditorUI#_focusableToolbarDefinitions

  See source

  All available & focusable toolbars.

• private

  _toolbarConfig : Objectmodule:editor-inline/inlineeditorui~InlineEditorUI#_toolbarConfig

  See source

  A normalized config.toolbar object.

Methods

• constructor( editor, view )module:editor-inline/inlineeditorui~InlineEditorUI#constructor

  See source

  Creates an instance of the inline editor UI class.

  Parameters

  editor : Editor

  The editor instance.

  view : EditorUIView

  The view of the UI.

• inherited

  addToolbar( toolbarView, [ options ] = { [options.isContextual], [options.beforeFocus], [options.afterBlur] } )module:editor-inline/inlineeditorui~InlineEditorUI#addToolbar

  See source

  Adds a toolbar to the editor UI. Used primarily to maintain the accessibility of the UI.

  Focusable toolbars can be accessed (focused) by users by pressing the Alt + F10 keystroke. Successive keystroke presses navigate over available toolbars.

  Parameters

  toolbarView : ToolbarView

  A instance of the toolbar to be registered.

  [ options ] : Object

  Properties

  [ options.isContextual ] : Boolean

  Set true if the toolbar is attached to the content of the editor. Such toolbar takes a precedence over other toolbars when a user pressed Alt + F10.

  [ options.beforeFocus ] : function

  Specify a callback executed before the toolbar instance DOM element gains focus upon the Alt + F10 keystroke.

  [ options.afterBlur ] : function

  Specify a callback executed after the toolbar instance DOM element loses focus upon Esc keystroke but before the focus goes back to the editable element.

• mixed

  delegate( events ) → EmitterMixinDelegateChainmodule:editor-inline/inlineeditorui~InlineEditorUI#delegate

  See source

  Delegates selected events to another Emitter. For instance:

  emitterA.delegate( 'eventX' ).to( emitterB );
  emitterA.delegate( 'eventX', 'eventY' ).to( emitterC );
  

  then eventX is delegated (fired by) emitterB and emitterC along with data:

  emitterA.fire( 'eventX', data );
  

  and eventY is delegated (fired by) emitterC along with data:

  emitterA.fire( 'eventY', data );
  

  Parameters

  events : String

  Event names that will be delegated to another emitter.

  Returns

  EmitterMixinDelegateChain

• inherited

  destroy()module:editor-inline/inlineeditorui~InlineEditorUI#destroy

  See source

  Destroys the UI.

• mixed

  fire( eventOrInfo, [ args ] ) → *module:editor-inline/inlineeditorui~InlineEditorUI#fire

  See source

  Fires an event, executing all callbacks registered for it.

  The first parameter passed to callbacks is an EventInfo object, followed by the optional args provided in the fire() method call.

  Parameters

  eventOrInfo : String | EventInfo

  The name of the event or EventInfo object if event is delegated.

  [ args ] : *

  Additional arguments to be passed to the callbacks.

  Returns

  *

  By default the method returns undefined. However, the return value can be changed by listeners through modification of the evt.return's property (the event info is the first param of every callback).

• inherited

  getEditableElement( [ rootName ] ) → HTMLElement | undefinedmodule:editor-inline/inlineeditorui~InlineEditorUI#getEditableElement

  See source

  Returns the editable editor element with the given name or null if editable does not exist.

  Parameters

  [ rootName ] : String

  The editable name.

  Defaults to main

  Returns

  HTMLElement | undefined

• inherited

  getEditableElementsNames() → Iterable.<String>module:editor-inline/inlineeditorui~InlineEditorUI#getEditableElementsNames

  See source

  Returns array of names of all editor editable elements.

  Returns

  Iterable.<String>

• init()module:editor-inline/inlineeditorui~InlineEditorUI#init

  See source

  Initializes the UI.

• mixed

  listenTo( emitter, event, callback, [ options ] = { [options.priority] } )module:editor-inline/inlineeditorui~InlineEditorUI#listenTo

  See source

  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.

  // 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 and set the return value of the fire method.

  Parameters

  emitter : Emitter

  The object that fires the event.

  event : String

  The name of the event.

  callback : function

  The function to be called on event.

  [ options ] : Object

  Additional options.

  Properties

  [ options.priority ] : PriorityString | Number

  The priority of this event callback. The higher the priority value the sooner the callback will be fired. Events having the same priority are called in the order they were added.

  Defaults to 'normal'

  Defaults to {}

• mixed

  off( event, callback )module:editor-inline/inlineeditorui~InlineEditorUI#off

  See source

  Stops executing the callback on the given event. Shorthand for this.stopListening( this, event, callback ).

  Parameters

  event : String

  The name of the event.

  callback : function

  The function to stop being called.

• mixed

  on( event, callback, [ options ] = { [options.priority] } )module:editor-inline/inlineeditorui~InlineEditorUI#on

  See source

  Registers a callback function to be executed when an event is fired.

  Shorthand for this.listenTo( this, event, callback, options ) (it makes the emitter listen on itself).

  Parameters

  event : String

  The name of the event.

  callback : function

  The function to be called on event.

  [ options ] : Object

  Additional options.

  Properties

  [ options.priority ] : PriorityString | Number

  The priority of this event callback. The higher the priority value the sooner the callback will be fired. Events having the same priority are called in the order they were added.

  Defaults to 'normal'

  Defaults to {}

• mixed

  once( event, callback, [ options ] = { [options.priority] } )module:editor-inline/inlineeditorui~InlineEditorUI#once

  See source

  Registers a callback function to be executed on the next time the event is fired only. This is similar to calling on followed by off in the callback.

  Parameters

  event : String

  The name of the event.

  callback : function

  The function to be called on event.

  [ options ] : Object

  Additional options.

  Properties

  [ options.priority ] : PriorityString | Number

  The priority of this event callback. The higher the priority value the sooner the callback will be fired. Events having the same priority are called in the order they were added.

  Defaults to 'normal'

  Defaults to {}

• inherited

  setEditableElement( rootName, domElement )module:editor-inline/inlineeditorui~InlineEditorUI#setEditableElement

  See source

  Stores the native DOM editable element used by the editor under a unique name.

  Also, registers the element in the editor to maintain the accessibility of the UI. When the user is editing text in a focusable editable area, they can use the Alt + F10 keystroke to navigate over editor toolbars. See addToolbar.

  Parameters

  rootName : String

  The unique name of the editable element.

  domElement : HTMLElement

  The native DOM editable element.

• mixed

  stopDelegating( [ event ], [ emitter ] )module:editor-inline/inlineeditorui~InlineEditorUI#stopDelegating

  See source

  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.

  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.

• mixed

  stopListening( [ emitter ], [ event ], [ callback ] )module:editor-inline/inlineeditorui~InlineEditorUI#stopListening

  See source

  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.

  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.

• inherited

  update()module:editor-inline/inlineeditorui~InlineEditorUI#update

  See source

  Fires the update event.

  This method should be called when the editor UI (e.g. positions of its balloons) needs to be updated due to some environmental change which CKEditor 5 is not aware of (e.g. resize of a container in which it is used).

• protected mixed

  _addEventListener( event, callback, [ options ] = { [options.priority] } )module:editor-inline/inlineeditorui~InlineEditorUI#_addEventListener

  See source

  Adds callback to emitter for given event.

  Parameters

  event : String

  The name of the event.

  callback : function

  The function to be called on event.

  [ options ] : Object

  Additional options.

  Properties

  [ options.priority ] : PriorityString | Number

  The priority of this event callback. The higher the priority value the sooner the callback will be fired. Events having the same priority are called in the order they were added.

  Defaults to 'normal'

  Defaults to {}

• protected mixed

  _removeEventListener( event, callback )module:editor-inline/inlineeditorui~InlineEditorUI#_removeEventListener

  See source

  Removes callback from emitter for given event.

  Parameters

  event : String

  The name of the event.

  callback : function

  The function to stop being called.

• private inherited

  _focusFocusableCandidateToolbar( candidateToolbarDefinition ) → Booleanmodule:editor-inline/inlineeditorui~InlineEditorUI#_focusFocusableCandidateToolbar

  See source

  Focuses a focusable toolbar candidate using its definition.

  Parameters

  candidateToolbarDefinition : FocusableToolbarDefinition

  A definition of the toolbar to focus.

  Returns

  Boolean

  true when the toolbar candidate was focused. false otherwise.

• private inherited

  _getCurrentFocusedToolbarDefinition() → FocusableToolbarDefinition | nullmodule:editor-inline/inlineeditorui~InlineEditorUI#_getCurrentFocusedToolbarDefinition

  See source

  Returns a definition of the toolbar that is currently visible and focused (one of its children has focus).

  null is returned when no toolbar is currently focused.

  Returns

  FocusableToolbarDefinition | null

• private inherited

  _getFocusableCandidateToolbarDefinitions() → Array.<FocusableToolbarDefinition>module:editor-inline/inlineeditorui~InlineEditorUI#_getFocusableCandidateToolbarDefinitions

  See source

  Returns definitions of toolbars that could potentially be focused, sorted by their importance for the user.

  Focusable toolbars candidates are either:

  • already visible,
  • have beforeFocus() set in their definition that suggests that they might show up when called. Keep in mind that determining whether a toolbar will show up (and become focusable) is impossible at this stage because it depends on its implementation, that in turn depends on the editing context (selection).

  Note: Contextual toolbars take precedence over regular toolbars.

  Returns

  Array.<FocusableToolbarDefinition>

• private inherited

  _initFocusTracking()module:editor-inline/inlineeditorui~InlineEditorUI#_initFocusTracking

  See source

  Starts listening for Alt + F10 and Esc keystrokes in the context of focusable editable elements and toolbars to allow users navigate across the UI.

• private

  _initPlaceholder()module:editor-inline/inlineeditorui~InlineEditorUI#_initPlaceholder

  See source

  Enable the placeholder text on the editing root, if any was configured.

• private

  _initToolbar()module:editor-inline/inlineeditorui~InlineEditorUI#_initToolbar

  See source

  Initializes the inline editor toolbar and its panel.

• private inherited

  _readViewportOffsetFromConfig() → Objectmodule:editor-inline/inlineeditorui~InlineEditorUI#_readViewportOffsetFromConfig

  See source

  Returns viewport offsets object:

  {
  	top: Number,
  	right: Number,
  	bottom: Number,
  	left: Number
  }
  

  Only top property is currently supported.

  Returns

  Object

Events

• inherited

  change:viewportOffset( eventInfo, name, value, oldValue )module:editor-inline/inlineeditorui~InlineEditorUI#event:change:viewportOffset

  See source

  Fired when the viewportOffset property changed value.

  Parameters

  eventInfo : EventInfo

  An object containing information about the fired event.

  name : String

  Name of the changed property (viewportOffset).

  value : Object

  New value of the viewportOffset property with given key or null, if operation should remove property.

  oldValue : Object

  Old value of the viewportOffset property with given key or null, if property was not set before.

• inherited

  ready( eventInfo )module:editor-inline/inlineeditorui~InlineEditorUI#event:ready

  See source

  Fired when the editor UI is ready.

  Fired before event-ready.

  Parameters

  eventInfo : EventInfo

  An object containing information about the fired event.

• inherited

  update( eventInfo )module:editor-inline/inlineeditorui~InlineEditorUI#event:update

  See source

  Fired whenever the UI (all related components) should be refreshed.

  Note:: The event is fired after each event-layoutChanged. It can also be fired manually via the update method.

  Parameters

  eventInfo : EventInfo

  An object containing information about the fired event.