I recently had to automatically implement emoticons in my TinyMCE instance on a website. One of the requirements was to be able to type :) and have it automatically change to the emoticon.This wasn’t a huge task but the issue that followed seem to present a challenge. By default the caret was moving back to the beginning of the text rather than staying in its natural position.

The solution I found to this problem was to add an extra element along with the image that was being inserted. Then I was able to search for that element id and select it which would position the caret in the correct place. Then I would remove the element added as it was no longer required.

var placeholderMarker = $(tinyMCE.activeEditor.getBody()).find('#cursorMarker');
tinyMCE.activeEditor.selection.select(placeholderMarker.get(0) );
placeholderMarker.remove();