OnPaste を使用すると、Firefox でリッチ テキストの貼り付けが失敗する
-
25-09-2019 - |
質問
の拡張子を書いています ニック編集 これにより、貼り付けられたすべてのリッチ テキストがプレーン テキストとして貼り付けられます。私のコードは Chrome と IE7 では完全に動作しますが、Firefox 3 (およびおそらく Firefox 2 でも、別の理由で、特に貼り付けイベントがないこと) では失敗します。
奇妙な点は、貼り付けられるテキストがプレーンテキストの場合、私のコードは完全に機能することです。あらゆるフォーマットで窒息するようです。以下に、Firefox バージョンに関係する手順を示します。これらの手順は、ペースト時に起動されます (イベントは起動しますが、ペーストは失敗します)。
- 現在の選択範囲と範囲を取得します
- で新しい div を作成します
contentEditable = true
, 、それを DOM に追加します - キャレットを新しい div に移動します
- 新しい div から HTML を取得し、クリーンアップして、古い選択範囲 (手順 1 で取得したもの) に入れるタイムアウトを設定します。
- true を返す (元の貼り付けを完了させ、コンテンツを新しい div に貼り付けます)
これらの手順はすべて実行されたように見えますが、貼り付けは行われません。コンソールにエラーは表示されません (解析エラーに関する警告だけが表示されます) text-align
- 宣言は削除されます)、Firebug でデバッグしても疑わしいことは何も起こりません (ペーストが空に見えることを除いて、これが問題です)。
この警告を見ると、Firefox が貼り付けたコンテンツを解析できないのではないかと思われますが、インターセプト コードがなければ、nicEditor に問題なく貼り付けることができます。
Firefox 専用のテスト スクリプトを次の場所にアップロードしました。 http://www.ryankinal.com/paste/firefox.html - これは、Firefox が完全な拡張機能から実行するコードです。
注意すべき点がいくつかあります:
- TinyMCE ペースト プラグインからかなりのインスピレーションを得ています
- 要素の選択に jQuery を使用しています
- 若干の修正も加えられているようです
Function.prototype
nicEdit で、これは奇妙だと思います - 別のリッチ テキスト エディターを使用することもできますが、これはデバッグの練習であると考えてください。
- 上にリンクされているコードは Firefox のみを対象としています。
解決
問題は、pasteイベントは、Firefoxなどの一部のブラウザでキャレットをリダイレクトするために、単純に遅すぎるということです。あなたがインターセプトキーボードショートカット場合は貼り付け用のキャレットリダイレクトトリックを行うことができるようになります( Ctrlキー + V 、 Cmdを + V およびシフト + 挿入)およびpasteイベントを無視しますが、コンテキストと編集メニューによってトリガこの手段ペーストがカバーされていません。私は、これはしかし、あなたができる最善だと思います。