増子良太のブログです

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

ckeditorのボタンを増やしてみよう(ckeditorカスタマイズ)

      2016/01/28

おはようございます!rmascoです。

さて!好評の(?)ckeditorカスタマイズ第3弾です!

過去の記事はこちらからどうぞ!

ckeditorカスタマイズ方法(その1)
ckeditorをカスタマイズするのに必要な情報や簡単な例を書いた記事です


リンクなどの機能で表示されるダイアログをカスタマイズ方法を書いた記事です

ckeditorカスタマイズ方法その3の内容

ckeditorについているボタン。
非常に多くのボタンがついていますが、
普段使わねーってボタンもあるかと思います。

ボタンの表示非表示に関しては、設定ファイルを変更するだけで、
簡単に表示非表示を変えることができます。

じゃあ、増やしたい時はどうでしょう?
たとえば

  • youtubeのIDを入れると、動画を表示するタグが挿入される
  • 現在時刻や日にちを挿入できる
    etc・・・
 
ckeditorではeditorの動き等以外はすべてpluginという仕組みになっています。
ckeditorをダウンロードして、pluginsの中を見てみましょう。
 
linkやimageというフォルダがあるかと思います。
これが実際はリンク導入機能だったり、画像挿入機能だったりします。
 
・・・ということは!
pluginの形で作成すれば、機能追加できるのでは!?
 
正解です!!
 
今日は現在日時を挿入できる機能を追加してみようと思います。
 

ckeditorにボタンを追加してみよう!

ボタンの追加のサンプルは、ダウンロードしたファイルの中に「_samples」というフォルダがあり、その中の「api_dialog.html」にあるので、そのファイルをコピーして追加してみようと思います。
 
色々と書いてありますが、まず注目すべきは下記になります。
 
 

プラグインが読み込まれた後に呼び出されるイベントを宣言しています。
{}の中に追加したい内容を実装します。
 
{}の中に今回日付を入力するためのボタンを作成します。
 

 
 
次にボタンを表示させるための記述を追記します。
 

このファイルをブラウザで見ると、このようになります。
Nowというボタンが一番右に追加されている
Nowのボタンを押してみましょう!
1行目に現在時刻が表示された
 
おお〜!!
表示されました
 
今回は時間の関係上、HTMLに直接実装してみました。
いかがでしょうか。こんなボタン、あんなボタン、追加してみたくなりましたか?
 

 - ckeditor