All documentation ↓← All docs

editor.getSelectedText()

Returns the plain-text content of the current selection — the text the user has highlighted, with formatting stripped. Use it for word counts, lookups, “search the web for this phrase” actions, or anything that needs the selected text rather than its markup.

Syntax

editor.getSelectedText()

Parameters

None.

Returns

The selected text as a string, or null when the selection is collapsed (a caret with nothing highlighted).

Behavior notes

  • Collapsed selection returns null. With just a caret and no highlighted text, getSelectedText() returns null— check for that before using the result.
  • Plain text, not HTML. The result is the text only; use getHTMLCode() or the selection range if you need the marked-up content.
  • Reflects the live selection,so read it at the moment you need it (for example inside a toolbar button’s click handler).

Example usage

Act on the highlighted text, guarding against an empty selection:

Code example
var editor1 = new RichTextEditor("#div_editor1");
var text = editor1.getSelectedText();
if (text) {
    window.open("https://www.google.com/search?q=" + encodeURIComponent(text));
}

Show a live character count of the current selection:

Code example
var text = editor1.getSelectedText() || "";
console.log(text.length + " characters selected");

Related

Calling editor.getSelectedText() from your app

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

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

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.