CKEditor Ecosystem Documentation
Search
Home/CKEditor 5/API
Module

engine/view/filler

@ckeditor/ckeditor5-engine/src/view/filler

module
See source

Set of utils related to block and inline fillers handling.

Browsers do not allow to put caret in elements which does not have height. Because of it, we need to fill all empty elements which should be selectable with elements or characters called "fillers". Unfortunately there is no one universal filler, this is why two types are uses:

  • Block filler is an element which fill block elements, like <p>. CKEditor uses <br> as a block filler during the editing, as browsers do natively. So instead of an empty <p> there will be <p><br></p>. The advantage of block filler is that it is transparent for the selection, so when the caret is before the <br> and user presses right arrow he will be moved to the next paragraph, not after the <br>. The disadvantage is that it breaks a block, so it can not be used in the middle of a line of text. The <br> filler can be replaced with any other character in the data output, for instance non-breaking space.

  • Inline filler is a filler which does not break a line of text, so it can be used inside the text, for instance in the empty <b> surrendered by text: foo<b></b>bar, if we want to put the caret there. CKEditor uses a sequence of the zero-width spaces as an inline filler having the predetermined length. A sequence is used, instead of a single character to avoid treating random zero-width spaces as the inline filler. Disadvantage of the inline filler is that it is not transparent for the selection. The arrow key moves the caret between zero-width spaces characters, so the additional code is needed to handle the caret.

Both inline and block fillers are handled by the renderer and are not present in the view.

Filtering

Constants

Type Definitions

Functions

  • BR_FILLER()

    static

    <br> filler creator. This is a function which creates <br data-cke-filler="true"> element. It defines how the filler is created.

    See source

    Related:

    • NBSP_FILLER

  • NBSP_FILLER()

    static

    Non-breaking space filler creator. This is a function which creates &nbsp; text node. It defines how the filler is created.

    See source

    Related:

    • BR_FILLER

  • getDataWithoutFiller( domText ) → String

    static

    Get string data from the text node, removing an inline filler from it, if text node contains it.

    See source
    getDataWithoutFiller( document.createTextNode( INLINE_FILLER + 'foo' ) ) == 'foo' // true
getDataWithoutFiller( document.createTextNode( 'foo' ) ) == 'foo' // true

    Parameters

    domText : Text

    DOM text node, possible with inline filler.

    Returns

    String

    Data without filler.

  • injectQuirksHandling( view )

    static

    Assign key observer which move cursor from the end of the inline filler to the beginning of it when the left arrow is pressed, so the filler does not break navigation.

    See source

    Parameters

    view : View

    View controller instance we should inject quirks handling on.

  • isInlineFiller( domText ) → Boolean

    static

    Checks if the text node contains only the inline filler.

    See source
    isInlineFiller( document.createTextNode( INLINE_FILLER ) ); // true
isInlineFiller( document.createTextNode( INLINE_FILLER + 'foo' ) ); // false

    Parameters

    domText : Text

    DOM text node.

    Returns

    Boolean

    True if the text node contains only the inline filler.

  • startsWithFiller( domNode ) → Boolean

    static

    Checks if the node is a text node which starts with the inline filler.

    See source
    startsWithFiller( document.createTextNode( INLINE_FILLER ) ); // true
startsWithFiller( document.createTextNode( INLINE_FILLER + 'foo' ) ); // true
startsWithFiller( document.createTextNode( 'foo' ) ); // false
startsWithFiller( document.createElement( 'p' ) ); // false

    Parameters

    domNode : Node

    DOM node.

    Returns

    Boolean

    True if the text node starts with the inline filler.