Selection

The Selection interface represents the range of content selected by the user or the current cursor position.

Note

The constructor is not directly accessible. Instead, you can access its properties and methods via the editor.selection object.

Example:

editor.selection.insertContents('<strong>foo</strong>');

Instance properties

container Read only

A contenteditable element where users can edit the content.

• Type: Nodes

Example:

const container = editor.selection.container;

range

A Range object that can be added to the native selection later.

• Type: Range

Example:

const range = editor.selection.range;

Instance methods

getCurrentRange()

Returns a Range object that is currently selected.

• Parameters:

  None.

• Return value:

  A Range object.

Example:

const range = editor.selection.getCurrentRange();

sync()

Adds the selection.range to the native selection.

• Parameters:

  None.

• Return value:

  None.

Example:

editor.selection.sync();

updateByRange()

Replaces the selection.range with the range of the native selection.

• Parameters:

  None.

• Return value:

  None.

Example:

editor.selection.updateByRange();

updateByBookmark()

Replaces the selection.range with the range represented by the bookmark.

• Parameters:

  None.

• Return value:

  None.

Example:

editor.selection.updateByBookmark();

getActiveItems()

Returns a list of items related to the current selection.

• Parameters:

  None.

• Return value:

  An Array that contains ActiveItem objects.

Example:

const activeItems = editor.selection.getActiveItems();

cloneContainer()

Creates a deep clone of the current container with its content. If there is a selection within the container, it ensures the selection is also preserved in the cloned container.

• Parameters:

  None.

• Return value:

  A Nodes object.

Example:

const newContainer = editor.selection.cloneContainer();

insertBookmark()

Inserts a bookmark at the cursor position or a pair of bookmarks at the selection boundaries.

• Parameters:

  None.

• Return value:

  {
    anchor: Nodes;
    focus: Nodes;
  }

Example:

const bookmark = editor.selection.insertBookmark();
console.log(bookmark.anchor, bookmark.focus);

toBookmark()

Changes selection.range to the range represented by the provided bookmark.

• Parameters:

  bookmark

  {
    anchor: Nodes;
    focus: Nodes;
  }

• Return value:

  None.

Example:

editor.selection.toBookmark(bookmark);

insertContents()

Inserts the specified content into the selection.

• Parameters:

  contents

  An HTML string, Node, DocumentFragment, Nodes, and Fragment.

• Return value:

  None.

Example:

editor.selection.insertContents('<p>foo</p>');

deleteContents()

Removes the contents of the selection.

• Parameters:

  None.

• Return value:

  None.

Example:

editor.selection.deleteContents();

setBlocks()

Adds new blocks or changes the target blocks in the selection.

• Parameters:

  value

  An HTML string or key-value object.

• Return value:

  None.

Example:

// Changes the target blocks to headings.
editor.selection.setBlocks('<h1 />');

// Changes the target blocks to numbered lists.
editor.selection.setBlocks('<ol><li></li></ol>');

// Adds "text-align" CSS property to the target blocks.
editor.selection.setBlocks({
  'text-align': 'center',
});

splitBlock()

Removes the contents of the selection and splits the block node at the cursor position.

• Parameters:

  None.

• Return value:

  {
    start: Nodes | null;
    end: Nodes | null;
  }

Example:

const parts = editor.selection.splitBlock();
console.log(parts.start, parts.end);

insertBlock()

Inserts a block into the selection.

• Parameters:

  value

  An HTML string or Nodes object.

• Return value:

  None.

Example:

editor.selection.insertBlock('<h1>heading</h1>');

splitMarks()

Splits text nodes or mark nodes.

• Parameters:

  removeEmptyMark Optional

  A boolean value indicating whether the empty mark nodes are removed. Default value is true.

• Return value:

  {
    start: Nodes | null;
    center: Nodes | null;
    end: Nodes | null;
  }

Example:

const parts = editor.selection.splitMarks();
console.log(parts.start, parts.center, parts.end);

addMark()

Adds the specified mark to the selected text.

• Parameters:

  value

  An HTML string or Nodes object.

• Return value:

  None.

Example:

// Adds bold.
editor.selection.addMark('<strong />');

// Changes font size.
editor.selection.addMark('<span style="font-size: 18px;" />');

removeMark()

Removes specified marks from the selection.

• Parameters:

  value Optional

  An HTML string or Nodes object.

• Return value:

  None.

Example:

// Removes all formatting.
editor.selection.removeMark();

// Removes bold.
editor.selection.removeMark('<strong />');

selectBox()

Collapses the selection to the center position of the specified box.

• Parameters:

  box

  A Box object or Nodes object.

• Return value:

  None.

Example:

editor.selection.selectBox(query('lake-box').eq(0));

insertBox()

Inserts a box into the selection.

• Parameters:

  boxName

  A string that specifies the name of the box.

  boxValue Optional

  A key-value object that specifies the data of the box.

• Return value:

  A Box object.

• Exception:

  Thrown when the box is not inserted.

Example:

// Inserts a horizontal rule.
editor.selection.insertBox('hr');

// Inserts an emoji.
editor.selection.insertBox('emoji', {
  url: '/assets/emojis/face_blowing_a_kiss_color.svg',
  title: 'Face blowing a kiss',
});

removeBox()

Removes the specified box. If no parameter is given, the selected box is removed.

• Parameters:

  box Optional

  A Box object or Nodes object.

• Return value:

  A Box object or null.

Example:

// Removes selected box.
editor.selection.removeBox();

// Removes a specified box.
editor.selection.removeBox(box);