rangeの保存　WYSIWYGエディタ注意点（1）

グラフィカルに見える所は、インラインフレーム、編集ボタン等はその親フレームに配置。
インラインフレームのidをeditとすると、

■IEの場合
doc = frames['edit'].document;
win = frames['edit'].window;

■Safar/FFの場合
doc = document.getElementById("edit").contentDocument;
win = document.getElementById("edit").contentWindow;

doc.designMode = "on";
とすれば編集可能。

インラインフレーム側のテキストを選択し、親ページに仕込んだボタンのクリック時にjavascriptを仕込むことによって、インラインフレーム側に編集を行います。

win.document.execCommand('createlink',false,URL);

ところが、この選択範囲、というもの、IE8では、1フレームに一つしかもてなくなっています。
つまり、親ページのボタンをクリックしたときに、別のインラインフレームをのせて、そこで詳細設定画面（画像選択とか、リンク先入力とか）を作ろうとすると、そっちにフォーカスが行っちゃって、インラインフレーム側を編集できない。
IE7まではOKなんです。

対処法は、onmousedown（onclickでもいけるかも）インラインフレームの選択範囲を保存する、ということです。

win.focus();
range = doc.selection.createRange();
len = range.text.length;
range.collapse();
if(len !=0){
range.moveEnd( "character", len);
range.moveStart( "character", 0 );
range.select();
}

IEは便利なexecCommand('inserthtml');が使えないので、

Safari/FFで
TAG = '<a href="'+URL+'" target="'+TARGET+'">'+rangetext+ '</a>';
win.document.execCommand('inserthtml', false, TAG);
というのを

win.focus();
parent.range.select();
rangetext = parent.range.text;
TAG = '<a href="'+URL+'" target="'+TARGET+'">'+rangetext+ '</a>';
parent.range.pasteHTML(TAG);

って感じに置き換えて、インラインフレームコンテンツの編集をします。