All documentation ↓← All docs

editor.getSelectionElement()

Returns the element that contains the current selection. Depending on what is selected, that is the selected control, the table cell the caret sits in, or the element that encloses a highlighted range. Use it to answer “where is the user right now?” — for example to enable table controls only inside a cell.

Syntax

editor.getSelectionElement()

Parameters

None.

Returns

The enclosing element, or null when the selection has no meaningful single container (for example an empty selection with no anchor).

Behavior notes

  • A selected control wins.If a control (such as an image) is selected, it is returned directly — the same element you would get from getSelectedControl().
  • A caret in a table cell returns that cell. When the selection is collapsed inside a TD or TH, that cell is returned — convenient for enabling cell-aware actions.
  • A range returns its enclosing element. For a highlighted range, getSelectionElement() walks up to the element that contains both ends of the selection.

Example usage

Find out whether the caret is inside a table cell:

Code example
var editor1 = new RichTextEditor("#div_editor1");
var el = editor1.getSelectionElement();
var inCell = el && (el.closest("td") || el.closest("th"));

Read the nearest link at the current selection:

Code example
var el = editor1.getSelectionElement();
var link = el ? el.closest("a[href]") : null;
if (link) console.log("Editing link:", link.href);

Related

Calling editor.getSelectionElement() from your app

editor.getSelectionElement() belongs to the editor instance. Every integration below works the same way: keep the object that new RichTextEditor(...) returns, and call it on that object.

Plain JavaScript

Code example
var editor1 = new RichTextEditor("#div_editor1");
// The constructor is synchronous: the editor is ready on the next line.
editor1.getSelectionElement();

React and Next.js

Code example
// editorRef is filled by the RichTextEditor wrapper from the React guides.
const editorRef = useRef(null);

function onClick() {
  editorRef.current?.getSelectionElement();
}

return <RichTextEditor editorRef={editorRef} />;

In Vue and Angular, the wrapper components in the guides keep the instance in a component variable (editor), so the call is the same. See the React, Vue and Angular pages, or download a tested project from the guides.

If the editor is undefined

  • The call ran before the component mounted. Call it from an event handler or after the mount effect has run.
  • In React development mode, Strict Mode mounts, unmounts and mounts again, so the wrapper sets editorRef.current to null in between. Use editorRef.current?. rather than storing the instance elsewhere.
  • The editor was destroyed (editor.destroy()) when its component unmounted.

All methods: method reference · all events: event reference.