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

---

この記事は “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) を用意していますので、その動作を試してみてください。

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

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

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