技術メモ帳 このページをアンテナに追加 RSSフィード

2006-09-30

[]Iframe の designMode="on" によるリッチテキストエディット 21:05 Iframe の designMode="on" によるリッチテキストエディットを含むブックマーク Iframe の designMode="on" によるリッチテキストエディットのブックマークコメント

こんな属性があるのを知らなかった。

実際には、Iframe の属性ではなさそうだが。


どうも、javascript で以下のように指定してあげる事により、

リッチなテキスト編集機能が有効になるようだ。

iframe.contentDocument.designMode = "on";

ちょっとサンプルを作ってみた。

選択範囲の色変えたり、画像貼付けたり出来ます。

http://gomibako.hahaue.com/rth.html

(Firefox only)


実際に文字の状態を変化させたりしたい場合は、

同要素の execCommand メソッドを使用すればよい。

たとえば、文字を太字にしたい場合は、

以下のように指定するだけで良い。

iframe.contentDocument.execCommand("bold",false,null);

色を赤くしたければ、

iframe.contentDocument.execCommand('forecolor', false, 'red');

画像を貼付けたければ、

iframe.contentDocument.execCommand('insertimage', false, 画像のURL);

で良い。面白いのが、

貼った画像を拡大縮小が出来る事だ。


こんな感じです。

ちなみに、ローカルの画像は無理なようだ。


技術的な詳細:

http://www.mozilla-japan.org/editor/midas-spec.html


追記:

IE でも contenteditable というものを

使えば同じ事が出来るようだ。

http://www.microsoft.com/japan/msdn/web/html/mshtml/createwp.asp


さらに追記:

Firefox only かと思ったらSafari でも普通に動いた。

この調子なら、きっと Opera も大丈夫だ。

clonedcloned 2006/09/30 19:16 こんにちは。
One-JAR使えば、ライブラリを解凍しなくてもjarごと固めることができるみたいですね。使ったことはないのですが。
参考はこちらで。
http://www-06.ibm.com/jp/developerworks/java/041217/j_j-onejar.html

lurkerlurker 2006/09/30 20:41 こんにちは。開発環境カンファレンスではお世話になりました。
>One-JAR使えば、ライブラリを解凍しなくても
なるほど。jarをロードするコードを jar に含めてるみたいですね。
作ったヒト発想がいいですね。
これは便利!!

えびえび 2007/07/25 00:33 とても参考になりました。ありがとうございます

lurkerlurker 2007/07/27 00:27 えびさん、わざわざありがとうございます。
お世辞とはいえ、人に感謝されると、とても嬉しい気持ちになります。