Hebikuzure's Tech Memo

2013年12月13日

contentEditable 領域に画像を貼り付ける

Filed under: Yet Another Internet Explorer Advent Calendar 2013 — hebikuzure @ 11:50 PM

この記事は “Yet Another Internet Explorer Advent Calendar 2013” の 13 日目です。


今頃になって気が付いたのですが (なので Advent Calender のような企画をやるとよい勉強の機会になるのですが)、Internet Explorer 11 では contentEditable 属性が ture に設定された領域に画像を貼り付ける機能が追加されています。この機能は IE Blog の “Enhanced Rich Editing Experiences in IE11” という記事で紹介されていたのですが、すっかり見落としていました。

まず contentEditable 属性ですが、これは元々Microsoft の独自実装として Internet Explorer 5.5 に搭載されました。この属性が true に設定されると、属性を持っている要素は編集可能になります。つまりページ上に表示されているテキストを編集することが可能になります。編集内容は新たなマークアップとして DOM に反映されるので、DOM を通じて編集された内容を検知したり、変数に格納して利用したりすることができます。ダイナミックなユーザー インタラクションが容易に実現できるので、この属性は HTML5 で標準化される事になっています。

さて、Internet Explorer 10 までのバージョンでは、contentEditable 属性が ture に設定された領域では、テキストの編集のみが可能でした。クリップボードからの貼り付けも、貼り付けられるデータがテキスト (プレーン テキスト、リッチ テキスト、HTML テキスト) である場合のみ可能でした。これに対して Internet Explorer 11 では画像の貼り付けが可能になっています。

貼り付けられた画像は Internet Explorer によって自動的に dataURI に変換され、以下のようなマークアップになります。

<img src="data:image/png;base64,(エンコードされた画像データ)>

実際に画像の貼り付けができるテストページ (http://www.hebikuzure.com/test20131213.html) を用意していますので、その動作を試してみてください。

image

image

image

画像を貼り付けたら (Internet Explorer であれば F12 開発者ツールを使い) DOM ツリーに上記のような img 要素が追加されている事が確認できます。

image

併せて、他のブラウザーでの動作を検証してみました。参考にしてください。

  • Chrome 31 / Chrome Canary 33
    画像の貼り付けはできませんでした
  • Firefox 26
    Internet Explorer 11 と同様の動作でした
  • Opera 18
    画像の貼り付けはできませんでした
広告

コメントする »

まだコメントはありません。

RSS feed for comments on this post. TrackBack URI

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

WordPress.com Blog.

%d人のブロガーが「いいね」をつけました。