先日のMTで画像をドラッグ＆ドロップするとData URIで配置されるの続きです。記事のくくりに画像がドラッグ＆ドロップされたらData APIでアップロードする機能を「Extend TinyMCEに組み込むかもしれません」と書いたので、実際に可能か試してみました。
コードは前回の記事にも掲載したとおりある程度書けていたので、extension.jsに組み込みつつ、画像を縮小して配置する方法を探る作業でした。その結果、画像がドラッグ＆ドロップされたらData APIで画像をアップロードしてファイルオプションを表示し、そのままの画像、もしくは縮小した画像を配置できるようになりました。（現在のところ、Firefoxでのみこの機能が利用できます。）
操作の様子を動画にしましたのでご覧下さい。（※動画にするのはあまり経験が無く、アクセシブルな動画ではないかと思います。すみません。）
Data APIでアップロードするにあたり、どうしてもData APIで認証が必要なため、アセットのアップロードのみできるユーザーを作成し、プラグインの設定画面に入力するようにしました。これが一番の悩み所でした。（余談ですが、FogBugzにて管理画面にログインしている時は認証なしで利用できるようにしてほしいと要望を出しました。）
開発中のプラグイン
GitHubのhideki-a/mt-plugin-extend-tinymce feature-dropimageブランチに格納しています。試してみたい方はダウンロードしてお試しください。
現時点で判明している課題
mt-tinymce-fieldとの相性が悪いようで、カスタムフィールドの作成画面がおかしくなります。（21時20分修正できた模様。）
Google Chromeなどはどうするか
TinyMCEの編集エリアはiframeのため、Google Chromeなどではセキュリティの関係でFirefoxのように画像がアップロードできません。画像をドロップできるエリアを作ってアップロードできるようにしようかと考え中です。
まとめ
意外なきっかけでHTML5のドラッグ＆ドロップに触れることができたほか、MTのプラグイン作成の勉強になりました。ドラッグ＆ドロップは便利ですね。