contentEditable と designMode
2005-03-11-4
[Programming]
[2005-03-11-1]で、@Wiki(あっとうぃき)<http://atwiki.jp/> の
「ワープロモード」はContentEditableを使っていると思われると書いた
ら、eto氏から
というものを使っているらしい。ちなみに atwiki の JavaScript ソース
は、Zope で使われている Epoz というものみたい。ソースの頭に
で、この designMode だとIEだけでなくFFでもブラウザから「見たまま
編集」ができる。ただし、ページ内の特定の領域(divなど)に対しては
使えないみたい。iframe 用。
mozilla - リッチテキスト編集を可能にする
<http://www.mozilla-japan.org/editor/midas-spec.html>
IE の designMode はまたちょっと挙動が違う。ページ全体(BODY)に対
して「見たまま編集」ができるかどうか指定するものみたい。先ほどの
Epoz では iframe に対して使ってる。
IE の designMode 関連情報:
CONTENTEDITABLE Attribute | contentEditable Property
<http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/contenteditable.asp>
designMode Property
<http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/designmode.asp>
これらを踏まえて、iframe に対してIEでもFFでも「見たまま編集」する
やっつけテストを書いてみた。id で操作を統一したいのだができなそう。
まだ良く分からないポイントがいっぱい。Epoz のソース読んで勉強しま
す...。
「ワープロモード」はContentEditableを使っていると思われると書いた
ら、eto氏から
contenteditableじゃないよ。FireFoxでも動くし。とのコメントを頂いた。JavaScript のソースを見てみると、designMode
というものを使っているらしい。ちなみに atwiki の JavaScript ソース
は、Zope で使われている Epoz というものみたい。ソースの頭に
Epoz - a cross-browser-wyswyg-editor for Zopeって書いてある。
で、この designMode だとIEだけでなくFFでもブラウザから「見たまま
編集」ができる。ただし、ページ内の特定の領域(divなど)に対しては
使えないみたい。iframe 用。
mozilla - リッチテキスト編集を可能にする
<http://www.mozilla-japan.org/editor/midas-spec.html>
ある文書があるとき、"designMode" 属性を加えて、それを "on" にして、
編集可能な文書を手に入れることができます。例えば、Javascript では、
"edit" の id をもった iframe(インラインフレーム)があれば、次のよ
うにしてその contentDocument を手に入れ、designMode を "on" に指定
することができます:
document.getElementById("edit").contentDocument.designMode="on";
IE の designMode はまたちょっと挙動が違う。ページ全体(BODY)に対
して「見たまま編集」ができるかどうか指定するものみたい。先ほどの
Epoz では iframe に対して使ってる。
IE の designMode 関連情報:
CONTENTEDITABLE Attribute | contentEditable Property
<http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/contenteditable.asp>
If this attribute is applied to a BODY element, it has the same
effect as setting the designMode property of the document object.
designMode Property
<http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/designmode.asp>
You can use the designMode property to put Microsoft Internet
Explorer into a mode where you can edit the current document.
これらを踏まえて、iframe に対してIEでもFFでも「見たまま編集」する
やっつけテストを書いてみた。id で操作を統一したいのだができなそう。
まだ良く分からないポイントがいっぱい。Epoz のソース読んで勉強しま
す...。
<html> <body> <iframe src="" id="dm" width="400" height="200"></iframe> <script language=JavaScript> <!-- var ua = navigator.userAgent.toLowerCase(); var isGecko = (ua.indexOf('gecko') != -1 && ua.indexOf('safari') == -1); try { if (isGecko) { document.getElementById('dm').contentDocument.designMode = "on"; } else { frames[0].document.designMode = "On"; } } catch (e) {alert('error')} // --> </script> </body> </html>
この記事に言及しているこのブログ内の記事