Wordpressのビジュアルエディタ「TinyMCE」のカスタマイズをしていくなかで、テキストをコピペした時にイベントを発火できるといいな〜と思いやり方を調べたので備忘録として残しておきます。
具体的にやりたかったのは、「はてなブログ」のエディタで採用されている仕様。
URLをペーストすると**「「リンクを挿入」ウィンドウ」**が立ち上がって、リンクの表示タイプを選択することができるアレです。
リンクの挿入とコンテンツの埋め込み@はてなブログ ヘルプ
はてなブログのエディタが使いやすいと評判だったので触ってみると「確かにいいな〜」と思うところが多いので、採用できるものは採用したいな、と。
ペーストでイベントを発火させる
やりたい！と思う人がいないのか、あまり情報がなかったんですが、仕組みは結構簡単につくれました。
TinyMCE自体が持っているPlugin Optionを使って、ペーストのタイミングでJavascriptの処理を走らせることができます。
タイミングはpaste_preprocessとpaste_postprocessの2種類。
ペーストしたテキストをDOMに変換する前と後で、プレーンなテキストとして使いたい場合はpreprocess、DOM要素として使いたい場合はpostprocessを使います。
あとは、fucition.phpでtiny_mce_before_initにフックしてオプションを呼べばOKです。
function my_tiny_mce_before_init( $initArray ){
$initArray['paste_preprocess'] = "function(plugin, args){
alert( 'paste_preprocess: ' + args.content );
}";
$initArray['paste_postprocess'] = "function(plugin, args){
alert( 'paste_postprocess: ' + args.node.innerHTML);
}";
return $initArray;
}
add_filter( 'tiny_mce_before_init', 'my_tiny_mce_before_init' );
paste_preprocessとpaste_postprocessのそれぞれのオプションに、コンテンツの中身をアラート表示するスクリプトを設定しています。"(ダブルクオーテーション）で囲んであくまでテキストとして設定している点がポイントです。
また、DOM変換の前後で引数の中身も変わるので、中身を取り出す処理もちょっと違います。
実行してみると…、
ペーストした文字列が、ちゃんとアラートで表示されました。
HTMLをゴリゴリ書くのが苦手なクライアントがいる場合や、オリジナルのテーマを配布している人にとって、ビジュアルエディタの使い勝手が向上するのは嬉しいポイントのはず。
処理が重くなってしまっては本末転倒ですが、ビジュアルエディタの機能追加としてはなかなか使えるチップスだと思います！