Kendo Vue Editor in Classic Mode get current Cursor position in editable area

[Daniel]

Hello all, I am using Kendo Editor and have the below setup:

<editor :resizable-content="true"
                :resizable-toolbar="true"
                contenteditable="true"
                style="height:360px"
                rows="10"
                cols="30"
                v-model="editorBody"
                @input="setBodyOnChange"
                @keyup="setBodyOnKeyUp"
                @execute="setBodyOnExecute"
                @select="onSelect"
                ref="editor">
        </editor>

I would like to retrieve the cursor position when someone clicks in the editable area. Specifically I think I should use the select event. But I can't find a way to do so....

 

Any help would be appreciated.

[Petar]

Hello Daniel,

The methods you can check are the getRange and getSelection. 

Here is a StackBlitz example demonstrating the usage and the results each of the two methods returns. 

You can inspect the objects each of the methods returns when you open the browser's console. Among the properties returned from the methods, there are the "offsets" that you need.

Check the linked example. I hope it will help you achieve what you need in your application.  

Regards,
Petar
Progress Telerik

[Daniel]

That is what I am looking for. Thank you Petar!

[Petar]

You are welcome!