CKEditor Ecosystem Documentation
Search
Report an issue
Home/CKEditor 5/API
Class

Widget (widget)

@ckeditor/ckeditor5-widget/src/widget

class
See source

The widget plugin. It enables base support for widgets.

See package page for more details and documentation.

This plugin enables multiple behaiors required by the widgets:

  • The model to view selection converter for the editing pipeline (it handles widget custom selection rendering). If a converted selection is wraps around a widget element, that selection is marked as fake. Additionally, proper the ck-widget_selected CSS class is added to indicate that widget has been selected.
  • The mouse and keyboard events handling on and around widget elements.

Filtering

Properties

Static properties

  • pluginName

    static

Methods

  • init()

  • _clearPreviouslySelectedWidgets( writer )

    private

    Removes CSS class from previously selected widgets.

    See source

    Parameters

    writer : DowncastWriter

  • _getObjectElementNextToSelection( forward ) → Element | null

    private

    Checks if element placed next to the current model selection exists and is marked in schema as object.

    See source

    Parameters

    forward : Boolean

    Direction of checking.

    Returns

    Element | null

  • _handleArrowKeys( isForward ) → Boolean | undefined

    private

    Handles arrow keys.

    See source

    Parameters

    isForward : Boolean

    Set to true if arrow key should be handled in forward direction.

    Returns

    Boolean | undefined

    Returns true if keys were handled correctly.

  • _handleDelete( isForward ) → Boolean | undefined

    private

    Handles delete keys: backspace and delete.

    See source

    Parameters

    isForward : Boolean

    Set to true if delete was performed in forward direction.

    Returns

    Boolean | undefined

    Returns true if keys were handled correctly.

  • _handleEnterKey( isBackwards ) → Boolean | undefined

    private

    Handles the enter key, giving users and access to positions in the editable directly before (Shift+Enter) or after (Enter) the selected widget. It improves the UX, mainly when the widget is the first or last child of the root editable and there's no other way to type after or before it.

    See source

    Parameters

    isBackwards : Boolean

    Set to true if the new paragraph is to be inserted before the selected widget (Shift+Enter).

    Returns

    Boolean | undefined

    Returns true if keys were handled correctly.

  • _onKeydown( eventInfo, domEventData )

    private

    Handles keydown events.

    See source

    Parameters

    eventInfo : EventInfo
    domEventData : DomEventData

  • _onMousedown( eventInfo, domEventData )

    private

    Handles mousedown events on widget elements.

    See source

    Parameters

    eventInfo : EventInfo
    domEventData : DomEventData

  • _selectAllContent() → Boolean

    private

    Handles CTRL + A when widget is selected.

    See source

    Returns

    Boolean

    Returns true if widget was selected and selecting all was handled by this method.

  • _selectAllNestedEditableContent()

    private

    Extends the document's selection to span the entire content of the nested editable if already anchored in one.

    See source

    See: getLimitElement.

  • _setSelectionOverElement( element )

    private

    Sets document's selection over given element.

    See source

    Parameters

    element : Element