ruby on rails のckeditor gemの機能ボタンをカスタマイズする

Tweet

概要

みなさんこんにちはcandleです。今回はruby on rails のckeditor gemのショートカットボタンをカスタマイズして自分が必要な機能のみを表示してみましょう。

前提

ckeditorの導入が済んでいる。
もしも、まだckeditorがの導入ができていない場合は下の記事を参照してください。
ruby on railsのckeditor gemの使い方をscaffoldを用いて解説する

ckeditor gemのjsファイルを書き換える

実はあまりgemの中身を直接いじるのはよくないのですが、面倒なので、今回は直接いじります。
railsのbundle installでpathを指定してgemファイルをrailsプロジェクトのvendorの中に入れている事を前提に説明します。
railsのプロジェクトの中で

cd vendor/bundle/ruby/2.0.0/gems/ckeditor-4.0.11/app/assets/javascripts/ckeditor/

に移動します。2.0.0の階層はそのrubyのバージョンによって違います。ckeditorのところもバージョンによってフォルダ名が変わります。各自のバージョンに合わせて移動してください。
すると、config.jsがあると思うので、それを開いてください。

ソースの「CKEDITOR.editorConfig = function( config ){」内のどこかに下のソースを貼り付けてください。

これは、デフォルトの全ての機能ボタンの設定です。

config.toolbar = [[ 'Source', '-', 'Save', 'NewPage', 'Preview', 'Print', '-', 'Templates' ],
[ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ],
[ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ],
[ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ],
'/',
['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ],
[ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl', 'Language' ],
[ 'Link', 'Unlink', 'Anchor' ],
'/',
[ 'Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe' ],
[ 'Styles', 'Format', 'Font', 'FontSize' ],
[ 'TextColor', 'BGColor' ],
[ 'Maximize', 'ShowBlocks' ],
[ '-' ],
[ 'About' ]
];

保存しましょう。
ブラウザでckeditorを見ると、次の様になっています。もちろんデフォルトの設定なので、見栄えは変わりません。

使いたい機能だけを表示する

流石にここまでゴテゴテに機能を表示させなくても良いと思います。
自分なりにカスタマイズしたい場合は下のように、必要な機能だけを配列に入れれば良いのです。

config.toolbar = [
  ['Source','Preview']
  ,['Cut','Copy','Paste','PasteText','Undo','Redo']
  ,['Styles','Format','Font','FontSize']
  ,['TextColor','BGColor','RemoveFormat','Maximize']
  ,'/'
  ,['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock']
  ,['NumberedList','BulletedList','Blockquote']
  ,['Link','Unlink','Anchor','Image','HorizontalRule','Smiley']
];

保存してこれをブラウザで見ると下のようになります。

まとめ

この様に、カスタマイズできるので自分が使いやすいエディタにしてみましょう。