Saturday, January 8, 2022

[FIXED] How to get the highlight text from TinyMCE?

Issue

I want to extract the text highlighted by the user using the TinyMCE. I have been able to extract the whole text with the TinyMCE API, and even just the paragraph selected with getNode(). I thought that getSel() would do it but it returns an object and I want the string.

var content = tinymce.activeEditor.selection.getSel();
console.log(content);

Returns:

Selection {anchorNode: text, anchorOffset: 259, focusNode: text, focusOffset: 286, isCollapsed: false, …}

TinyMCE: https://www.tinymce.com/docs/api/tinymce.dom/tinymce.dom.selection/#getsel

I also found getSelection in JavaScript, however it seems not to work properly in Chrome. Either way I prefer to use the TinyMCE API if it is possible. https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelection


Solution

Based on the official documentation at tinymce.com/docs/api/tinymce.dom/tinymce.dom.selection/#getcontent:

// Alerts the currently selected contents
alert(tinymce.activeEditor.selection.getContent());

// Alerts the currently selected contents as plain text
alert(tinymce.activeEditor.selection.getContent({format: 'text'}));

You would write your code like this:

var content = tinymce.activeEditor.selection.getContent();
console.log(content);

[EDIT] Or to get the plain-text content:

var content = tinymce.activeEditor.selection.getContent({format: 'text'});
console.log(content);

Note the difference between tinymce.activeEditor.selection.getContent() and tinymce.activeEditor.getContent().

  • tinymce.activeEditor.selection.getContent() - get the HTML or plain-text of the selected/highlighted content in the editor/textarea.

  • tinymce.activeEditor.getContent() - get the entire content of the editor/textarea.



Answered By - Sally CJ

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.