joppot

コピペで絶対動く。説明を妥協しない

プログラミング

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

投稿日:2014年9月11日 更新日:


iowjhfaio

概要

みなさんこんにちは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があると思うので、それを開いてください。

findconfigjs

ソースの「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' ]
];

alltab

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

customalltab


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

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

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']
];

customtooltab

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

mycustomviews

まとめ

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

スポンサードリンク

「為になったなぁ」と思ったら、シェアお願いします。

-プログラミング
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

wordpressのコメントフォームを編集し、名前とメールのデフォルト値を設定する

概要 みなさんこんにちはcandleです。今回はwordpressのコメントフォームをオーバーライドしてフォームの「名前」「メールアドレス」「url」のデフォルトバリューを設定したいと思います。 コメ …

react-lazyloadを使って画像を遅延ロードをする

概要 みなさんこんにちはcandleです。今回はreact-lazyloadを使って画像の遅延読み込みをしてみましょう。SPAにおける問題は最初の読み込み時の遅さです。その中でも画像が多いサイトになる …

C++のopencvでhelloworld

概要 (追記、2018年11月に書き直しました) みなさんこんにちはcandleです。インストールできたopencvを使ってhelloworldを行いましょう。 opencvでhelloworldとは …

pythonのfabricでファイルを分割しfabfileに読み込む方法

概要 皆さんこんにちはcandleです。今回はfabricで分割したpythonファイルを読み込んでみましょう。 fabricはfabfile.pyというファイルに実行したいコマンドを書くのですが、 …

railsのmodelで各データが何個あるかカウントする

概要 皆さんこんにちはcandleです。 今回は、railsでレコードのデータそれぞれ何個あるのか数える方法を紹介します。 mysqlだと簡単なのですが、railsだとよくわからなかったので、いろいろ …

  • English
  • 日本語

ベンチャー企業のCTOをやってます。大学時代にプログラミングを始め、javaから入門し、C++へて、PHPへと進み、会社ではRailsを使用。自動化が大好きなプログラマー