増子良太のブログです

増子良太が書いているブログです。テーマをしぼらず、思いついたものをただひたすら書いていきます。

ckeditorでボタンが押された時のイベントを取得したい(ckeditorカスタマイズ)

      2015/10/16

こんばんわ!rmascoです。

最近寒くて朝起きるのが辛いな〜と思い、
エアコンを起きる1時間前に電源が入るようセットしたら、
暖かくて2度寝しましたアワ((゚゚дд゚゚ ))ワワ!!

ckeditorカスタマイズ方法(その1)の概要

さて、今回からwysiwygエディターであるckeditorのtips紹介をしたいと思います。
wysiwygってなんぞや?という説明は他のサイトに任せるとして、
ここではckeditorのカスタマイズについて書いていきたいと思います。

ckeditorの詳しいカスタマイズ方法って、なかなかないんですよね。
ボタンの表示非表示だったりはいろんな記事が紹介しているんですが、
このイベントをフックするとか、モードが切り替えられたらとか、
少し突っ込もうとすると、情報がほとんど見つからない状態です。

私はカスタマイズする必要が出て、やっておりますが、
これをせっかくだから共有してみよう!というのが、この記事を書くきっかけです。

ckeditorカスタマイズ始め!

それでは!
まず、カスタマイズする上で欠かせないのが、JavaScriptAPIのページです。
ckeditor – JavaScript API

ここにはイベント名や、存在するメソッドなど貴重な情報が色々書いてあります。
大体ここで調べて、調べたことを実装してみるというのが定番の手順化してきています。
英語なので、どうしても拒否反応が出てしまいますが、少しだけソースも書いてあるので、
苦手な人はソースだけ読んでもいいかもしれません。

今回はwysiwygのボタンが押された時のイベントをキャッチする必要があり、
そこらへんを調べたので、書いていきます。

  • まずイベントを取得するための下準備を行います。

  • ボタンを押した時のイベントをフックしたい時(イベント実行前)

  • ボタンを押した時のイベントをフックしたい時(イベント実行後)

var editor = ev.editor;
editor.on( ‘afterCommandExec’, function( ev ){
// 押下されたボタンイベント名を表示
alert(ev.data.name);
} );
});

なんだよ、これだけかよと思われた方。
そうです!!これだけなんです。
ckeditorはAPIが非常に良くできており、
ckeditor自体のソースを修正しなくてもイベント等を拾ったり、
カスタマイズを行うことができます。

ckeditorは日々進歩しています。
使える機能が増えたり、バグフィックスだったり。
上記のようなAPI経由でカスタマイズを行なっていれば、
ほぼ何もしなくてもckeditorだけ入れ替えてしまえば、
このような更新に対応できてしまいます。
運用面、保守面を考えた上でも非常に効率的です。

もちろんAPI自体に修正があれば、カスタマイズ部分も修正が必要ですが。。。

今回はざっくりした感になってしまいましたが、
次回はもう少し詳しく説明できればと思います。

この記事を読んでckeditorを使ってみたいという方は、
itboyさんの記事が詳しかったので参考にしてみてください。
高機能でカスタマイズも容易なWYSIWYGエディタ [CKEditor]

他にもたくさんあるかと思いますが、時間がないので載せれませんでした。
もしこのページもわかりやすいよというページがあれば、
コメントなどに書いてもらえればと思います。

こんな部分も知りたいという方もコメント頂ければ、
次回の記事に載せるよう精進します(^^♪

 - ckeditor