Search code examples
javascripttinymcehighlighting

How to highlight a given text in TinyMCE?


I have the following phrase:

The birds fly in the sky near planes.
0123456789012345678901234567890123456
          1         2         3 

How can I highlight in the sky with TinyMce if I know the start(14) and end(23) of the phrase ?

I would like to use the setRng method but I didn't find any sample code.


Solution

  • Here is the solution I came up with :

    var ed = tinyMCE.activeEditor;
    var range = ed.selection.getRng();
    range.setStart(textNode, start);
    range.setEnd(textNode, end);
    ed.selection.setRng(range); 
    

    Where :

    • textNode can be a DOM text node that you can retrieve with getElementById or any other short-hand properties (parent, nextSibling etc)
    • start and end are respectively the beginning and the end of the text you want to select

    I prefer this solution because I only use the tinyMCE API. I don't rely on objects and methods that can change (in behavior, in bugs ...) from browser to browser.