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();