← All docs

editor.getSelectedControl()

Returns the control element that is currently selected — typically an image the user has clicked, shown with resize handles. It returns null when the selection is ordinary text or a caret. Use it to build context actions for a selected object, such as an “edit image” or “set alt text” button.

Syntax

editor.getSelectedControl()

Parameters

None.

Returns

The selected control element, or null if no control is selected.

Behavior notes

  • Control selection is distinct from text selection. Clicking an image selects it as a control; dragging across words is a text range. Only the former makes getSelectedControl() return an element.
  • Returns null for a caret or text range. Guard for null before touching the result.
  • It drives object-specific behavior. The editor itself checks the selected control in operations like delete(), which removes the selected image rather than text.

Example usage

Only enable an “edit image” action when an image is selected:

Code example
var editor1 = new RichTextEditor("#div_editor1");
var control = editor1.getSelectedControl();
if (control && control.tagName === "IMG") {
    openImageOptions(control);   // e.g. resize, alt text, replace
}

Read the source URL of the currently selected image:

Code example
var control = editor1.getSelectedControl();
var src = control && control.tagName === "IMG" ? control.src : null;

Related

Calling editor.getSelectedControl() from your app

editor.getSelectedControl() 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.getSelectedControl();

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?.getSelectedControl();
}

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.