tinyMCE - get content up to cursor position

Question

I am making a little word prediction plugin for tinyMCE and need to extract a bit of text and later insert text from a list of predicted words. The insertion should be no problem, as I know where the cursor is and can use the mceInsertContent command. Getting the text for the prediction however...

I need to extract a subset of the text ending at the letter immediately before the cursor position and starting at, well, the start of the text. I can strip HTML tags myself if neccessary, but I prefer letting tinyMCE do it if possible.

I was thinking of doing it like this:

Insert bookmark at current cursor positon using mceInsertContent
Create a range from start of text up to my bookmark.
Get the content of the range.
Delete the bookmark.

Now, since I'm not that well versed in tinyMCE that has proved to be a bit of a challenge for me, so how would one go about doing this?

The code needs to work cross-browser.

score 10 · Accepted Answer · edited Apr 28 '15 at 13:29

10

You may try this code snippets (ed is the tinymce editor object)

A. Insert bookmark at current cursor positon using mceInsertContent

ed.execCommand('mceInsertContent', false,'<span class="marker">\ufeff</span>');

B. Create a range from start of text up to my bookmark.

var rng = ed.selection.getRng(1);
var rng2 = rng.cloneRange();

// set start of range to begin of forst paragraph
rng2.setStartBefore($(ed.getBody()).find('p:first').get(0));

rng2.setEndBefore($(ed.getBody()).find('span.marker').get(0));
ed.selection.setRng(rng2);

C. Get the content of the range.

// get content of selection (range)
var content = ed.selection.getContent({format: 'text'});

D. Delete the bookmark.

$(ed.getBody()).find('span.marker').remove();

Update: If you are concerned about the selection change you may reset your initial range

ed.selection.setRng(rng);

edited Apr 28 '15 at 13:29

totallyNotLizards

8,489
9
51
85

answered Feb 07 '12 at 15:47

Thariama

50,002
13
138
166

Is it possible to do without making an actual selection of the text? – Woodgnome Feb 09 '12 at 13:18
maybe, do you need the content including all html tags or do oyu want plain text? – Thariama Feb 09 '12 at 13:20
`ed.selection.setRng(rng);` does the job regardless of extracting HTML of plain text - accepted your answer :-) – Woodgnome Feb 09 '12 at 13:28
its throwing bellow error: faild to execute 'setStartBefore' on 'Range': parameter 1 is not of type 'Node' , why this error ? @Woodgnome – KAmit May 25 '17 at 14:31
How can you achieve this without jquery? – GermanJablo Jul 30 '21 at 20:21
you may use ed.getBody().querySelector('span.marker') instead of $(ed.getBody()).find('span.marker') – Thariama Aug 10 '21 at 07:51

score 1 · Answer 2 · answered Jul 10 '19 at 15:04

Here's my solution for this one (when Ctrl is pressed, the word is displayed in console):

function isLetter(chr){
    if(chr.match(/[A-Za-z\u00C0-\u00D6\u00D8-\u00f6\u00f8-\u00ff]/i)){
        return true;
    }
    else{
        return false;
    }
}



var editor = tinymce.activeEditor;
var $edBody = $(editor.getBody());
editor.on('KeyUp', function(e){
    if(e.code == "ControlLeft"){
        var sel = editor.selection.getSel();
        var caretPos = sel.anchorOffset;
        var txtData = sel.anchorNode.data;
        var i = caretPos;
        var word = "";

        while(i > 0){
            if(isLetter(txtData.charAt(i))){
                word += txtData.charAt(i);
                i -= 1;
            }
            else{
                break;
            }
        }

        word = word.split("").reverse().join("");

        i = caretPos + 1;
        while(i < txtData.length){
            if(isLetter(txtData.charAt(i))){
                word += txtData.charAt(i);
                i += 1;
            }
            else{
                break;
            }
        }
        console.log(word);
    }
});

Maybe there is an cleaner or more elegant way to solve this, if so, please comment and let's make this solution better.

score 1 · Answer 3 · answered Jul 12 '22 at 05:32

I just stumbled upon a similar usecase. I want to remove everything after the cursor position.

Here's my solution

// Insert a unique marker so I can easily find the current position in the editor
const UNIQUE_MARKER = "MARKER";
editor.insertContent(UNIQUE_MARKER);

const markerIndex = editor.getContent().indexOf(UNIQUE_MARKER);
const beforeCursorContent = editor.getContent().slice(0, markerIndex);

editor.setContent(beforeCursorContent);

tinyMCE - get content up to cursor position

3 Answers3

Linked