Selection

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

Note

The constructor is not directly accessible. Instead, you can access its 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 which is used to add it 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 containing the items related to the current selection.

• Parameters:

  None.

• Return value:

  An Array that contains ActiveItem objects.

Example:

const activeItems = editor.selection.getActiveItems();

insertBookmark()

Inserts a bookmark at the cursor position or a pair of bookmarks at the beginning and end of the selection.

• Parameters:

  None.

• Return value:

  {
    anchor: Nodes;
    focus: Nodes;
  }

Example:

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

toBookmark()

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

• Parameters:

  bookmark

  {
    anchor: Nodes;
    focus: Nodes;
  }

• Return value:

  None.

Example:

editor.selection.toBookmark(bookmark);

insertContents()

Inserts the specified contents into the selection.

• Parameters:

  contents

  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 then splits the block node at the point of the cursor.

• 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 texts of the selection.

• 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 the specified marks in 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 not given, the selected box is removed.

• Parameters:

  box Optional

  A Box object or Nodes object.

• Return value:

  A Box object or null.

Example:

// Removes the box that was selected by the user.
editor.selection.removeBox();

// Removes the provided box.
editor.selection.removeBox(box);