refirio.org

ThickBoxで作ったiframe内部から、TinyMCEの本文へデータを挿入する仕組みでハマったのでメモ。iframe内で色々操作すると、IEではTinyMCEのカーソル位置がリセットされてしまうことがあります。つまり、意図した位置にデータが挿入されないことがあります。

IEの場合はどうにもならないのかなぁ…と思ったけど、WordPressにあるファイル挿入機能ではカーソル位置を正しく記憶しているので、WordPressではどうやって処理しているのかコードを調べてみた。

大量のコードから該当箇所を突き止めるのに時間がかかったけど、どうやらIEの場合のみ、カーソル位置を別途保持しておく必要があるみたい。

↓ThickBoxオープン時にカーソル位置を記憶。

$(document).ready(function() {
  $('a.thickbox').click(function() {
    if (tinymce.isIE) {
      tinyMCE.get('tiny_mce').focus();
      tinyMCE.activeEditor.windowManager.bookmark = tinyMCE.activeEditor.selection.getBookmark();
    }
  });
});

↓データ挿入時にカーソル位置を復元。

$(document).ready(function() {
  $('a.insert').click(function() {
    if (parent.tinymce.isIE) {
      parent.tinyMCE.activeEditor.focus();
      parent.tinyMCE.activeEditor.selection.moveToBookmark(parent.tinymce.EditorManager.activeEditor.windowManager.bookmark);
    }
    parent.tinyMCE.activeEditor.execCommand('mceInsertContent', false, '挿入したいデータ');
    parent.tb_remove();
  });
});

a.thickbox や a.insert という値は一例なので、実際のアプリケーションに合わせて適当に変更します。