ブログを書いていると、記事を入力するエリアの上に、簡易タグ挿入の機能がついてることってよくありますよね。
モノによっては、見たまま編集できる入力エリアの場合もあります。

先日、仕事でCMS(コンテンツマネジメントシステム)を作る機会がありました。
クライアント様の要望で、「解りやすい編集画面が欲しい」とのことだったので、オリジナルのエディタを作成しました。

wysiwygエディタ、もしくはリッチテキストエディタ、HTMLエディタ、ブラウザエディタ、色んな名称があるけど、そのエディタを作る上での注意点です。


FFやSafariと、IEはちょっと挙動が違う為、場合分けしないと行けないのだけど、IEも7と8で挙動が変わってきます。
基本的にWYSISYGエディタは、グラフィカルに見える所は、インラインフレームで見せています。
で、編集ボタン等はその親フレームに配置されます。
インラインフレームの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);

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

中々楽しいですよ。
CMS作成の際には、自由編集エリアに是非導入ください。

ブログランキング このエントリーをはてなブックマークに追加