Question

I have a tinymce custom button, which toggles an emoticons div beside a textarea.

onclick : function() {
  ed.focus();
  $('#my-input').toggleClass('with-emoticons');
  $('#emoticons').toggleClass('emo-visible');
}

When I click the button, the emoticons div has revealed, but the caret goes from the end to the start of my text.

How can I preserve the carets position while clicking the custom button?

Answer 1

Looks like you need to use a bookmark

onclick : function() {
  ed.focus();

  var bookmark = ed.selection.getBookmark();

  $('#my-input').toggleClass('with-emoticons');
  $('#emoticons').toggleClass('emo-visible');

  ed.selection.moveToBookmark(bookmark); 
}

The bookmark-type used here is a html bookmark which represents a non-visible span in the editor html. The getBookmark function is able to produce non-html bookmarks too. For this you may call ed.selection.getBookmark(2, true); For more information on tinymce bookmarks have a look at the docs.