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>
この記事に言及しているこのブログ内の記事