Search code examples
javascriptwordpresstinymce

How to get the highlight text from TinyMCE?


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.