contenteditableなdivのpaste処理において、コピー元を判別する方法

Question

実装したい要件

<div contenteditable="true" id="editor"></div>な要素内でのペースト処理について、以下のような仕様としたいと思っています。

・貼り付け元が同じdiv内の場合 -> そのままhtml形式で貼り付け
・貼り付け元が他のwebサイトなど、異なる場合 -> テキスト形式での貼り付け

理由としては、外部サイトからの貼り付けでスタイルが崩れたりすることが多く、テキスト貼り付けのほうがむしろ便利という声があがっているためです。

その際の「貼り付け元が同じdiv内かどうか？」を判定する方法がわからずに困っています。

試したこと

当初は、以下のようにいけるのでは？とかんがえていました。

$('#editor').on('copy', function(event){
  // clipboardData(DataTransferオブジェクト)にフラグかなにか持たせようとトライ
  var clipboardData = window.clipboardData || event.originalEvent.clipboardData;
  clipboardData.setData('allowOriginalPaste', '1'); // <= ここでセットできなかった
});

$('#editor').on('paste', function(event){
  // 上記フラグのうむを判別して処理をわけようとトライ
  var clipboardData = window.clipboardData || event.originalEvent.clipboardData;
  if(clipboardData.getData('allowOriginalPaste')){ return; }
  // 以下text形式でのペースト処理
  ...
});

ですが、コメントにあるとおり、copyイベントではsetData処理がうまくワークしません。

どなたか知見をお持ちの方がいらっしゃいましたら、ご教示いただけないでしょうか？

参考

外部ライブラリですが、ckEditorなどではこのあたりの処理がワークできているようですが、
訳あってCKEditorが導入できません。(CKEDITOR.DATA_TRANSFER_INTERNALの値で判断している模様)

Answer 1

完璧でなくていいのであれば（コピー→いったん枠から外れる→貼り付け、とするとテキストになる）、

• oncopy時にフラグ変数を立てる
• onblurでそのフラグを落とす
• onpasteでフラグが「なければ」テキストとして処理

というような流れにすればできるかと思います。

Comments

[h_daido]

ありがとうございます。やはりそうなりますよね....。
dataTransfer関連のAPIはもう少し柔軟になってくれたらなぁと思う今日この頃です。