[解決済み] 貼り付けイベントでクリップボードのデータを取得するJavaScript (クロスブラウザ)

質問

Webアプリケーションで貼り付けイベントを検出し、貼り付けられるデータを取得するにはどうすればよいですか？

リッチテキストエディタにテキストを貼り付ける前に、HTMLコンテンツを削除したいのですが。

貼り付け後のテキストをクリーニングすることは有効ですが、問題は、以前の書式設定がすべて失われてしまうことです。例えば、エディターで文章を書いて太字にすることはできますが、新しいテキストを貼り付けると、すべての書式設定が失われてしまいます。貼り付けられたテキストだけをクリーニングし、以前の書式設定はそのままにしておきたいのです。

理想的には、すべてのモダンブラウザ（例：MSIE、Gecko、Chrome、Safari）で動作するソリューションであることが望ましいです。

なお、MSIEは clipboardData.getData() しかし、他のブラウザで同様の機能を見つけることができませんでした。

解決方法は？

この回答を書いてから状況が変わりました。Firefox がバージョン 22 でサポートを追加したため、すべての主要なブラウザが、paste イベントでクリップボードのデータにアクセスすることをサポートするようになりました。以下を参照してください。 Nico Burnsの回答 を例に挙げて説明します。

従来は、クロスブラウザで一般的に可能とは言えませんでした。理想は、貼り付けられたコンテンツを paste イベントが発生します。 最近のブラウザで可能な しかし、いくつかの古いブラウザ（特に、Firefox < 22）ではできません。

古いブラウザに対応する必要がある場合、できることはかなり複雑で、Firefox 2 以上、IE 5.5 以上、Safari や Chrome などの WebKit ブラウザで動作するちょっとしたハックです。TinyMCEとCKEditorの最近のバージョンはこのテクニックを使用しています。

1. キープレスのイベントハンドラを使用して、ctrl-v / shift-ins イベントを検出します。
2. このハンドラで、現在のユーザー選択を保存し、テキストエリア要素をドキュメントの画面外（たとえば左-1000px）に追加し、そのテキストエリア要素の右側にある "textarea "ボタンをクリックします。 designMode をオフにして focus() をテキストエリアに貼り付けると、キャレットが移動し、ペーストが効果的にリダイレクトされます。
3. イベントハンドラで非常に短いタイマー（たとえば1ミリ秒）を設定し、別の関数を呼び出して、textareaの値を保存し、文書からtextareaを削除し、textareaの値を変更する。 designMode をオンに戻し、ユーザーの選択を復元してテキストを貼り付けます。

これは、キーボードによる貼り付けイベントに対してのみ機能し、コンテキストメニューや編集メニューからの貼り付けには使えないことに注意してください。貼り付けイベントが発生した時点では、キャレットをテキストエリアにリダイレクトするには遅すぎます (少なくとも一部のブラウザでは)。

万が一、Firefox 2 をサポートする必要がある場合は、そのブラウザで WYSIWYG エディタ iframe のドキュメントではなく、親ドキュメントにテキストエリアを配置する必要があることに注意してください。