What’s the best way to set cursor/caret position?

by

After spending over 15 hours on this issue (dedication, I know), I found a partial solution that works in FF and Safari, but not in IE. For the moment, this is good enough for me although I might continue working on it in the future.

The solution: When inserting HTML at the current caret position, the best function to use is:

tinyMCE.activeEditor.selection.setContent(htmlcontent);

In Firefox and Safari, this function will insert the content at the current caret position within the iframe that WordPress uses as a TinyMCE editor. The issue with IE 7 and 8 is that the function seems to add the content to the top of the page, not the iframe (i.e. it completely misses the text editor). To address this issue, I added a conditional statement based on this code that will use this function instead for IE:

tinyMCE.activeEditor.execCommand("mceInsertRawHTML", false, htmlcontent);

The issue for this second function, however, is that the caret position is set to the beginning of the post area after it has been called (with no hope of recalling it based on the browser range, etc.). Somewhere near the end I discovered that this function works to restore the caret position at the end of the inserted content with the first function:

tinyMCE.activeEditor.focus();

In addition, it restores the caret position to the end of the inserted content without having to calculate the length of the inserted text. The downside is that it only works with the first insertion function which seems to cause problems in IE 7 and IE 8 (which might be more of a WordPress fault than TinyMCE).

A wordy answer, I know. Feel free to ask questions for clarification.

More Related Contents:

  1. Detect click event inside iframe
  2. Can I use multiple versions of jQuery on the same page?
  3. How to access parent Iframe from JavaScript
  4. Getting around X-Frame-Options DENY in a Chrome extension?
  5. Redirect parent window from an iframe action
  6. Safari 3rd party cookie iframe trick no longer working?
  7. How to pick element inside iframe using document.getElementById
  8. how to access iFrame parent page using jquery?
  9. Creating an iframe with given HTML dynamically
  10. How can I detect whether an iframe is loaded?
  11. jQuery iframe load() event?
  12. How is it possible for an iframe to access its parents DOM?
  13. Nested iframes, AKA Iframe Inception
  14. Detect mousemove when over an iframe?
  15. ‘load’ event not firing when iframe is loaded in Chrome
  16. How can two instances of a userscript communicate between frames?
  17. Access child iFrame DOM from parent page
  18. How to synchronize scrolling positions for several iframes
  19. Insert content into iFrame
  20. AngularJS ng-src inside of iframe
  21. QuerySelector for Web Elements Inside iframe
  22. How can I handle errors in loading an iframe?
  23. Detect X-Frame-Options
  24. Cross sub domain iframes and JavaScript
  25. Stopping a iframe from loading a page using javascript
  26. Why won’t this JavaScript (using document.open and document.write) work in Internet Explorer or Opera?
  27. Get height of iframe with external URL
  28. Hook AJAX in WordPress
  29. Why is iframe.contentWindow == null?
  30. How to pass parameters through iframe from parent html?

Leave a Comment