Today I got a requirement from my client that in tinyMCE editor I have to add few predefined content at cursor current position and after that cursor should remain on the same place instead of at the end of newly added content. So it is clear that to achieve that I have store the current cursor position in a variable before appending the new predefined content.

var ed = tinyMCE.get('TXT_AREA_ID');     // get editor instance
var range = ed.selection.getRng().startOffset;     // get range


In above code you just need to replace ‘TXT_AREA_ID’ by the textarea ID you are using for tinyMCE content. In above code I am saving the cursor current position to a variable then appending the content and after that returning cursor to the saved position.

How to test the above code quickly:
– Open any link in browser, which have tinyMCE editor.
– Open browser developers tool and go to console where you can write JAVASCRIPT code.
– Click on any place inside that tinyMCE editor.
– Copy paste the above code and replace ‘TXT_AREA_ID’ by textarea ID used by that tinyMCE.
– Click on Run
– You will get a numerical value in alert, this numerical value is the cursor current position.

Hope above will help others 🙂