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のbogoでサイトで使用する言語を「en-US」から「en」に変更する方法

English 日本語 概要 みなさんこんにちはcandleです。 今回はbogoプラグインのカスタマイズです。bogoはwordpressのサイトを簡単に他言語に対応することができる素晴らしいプラグ …

phpのsnappyライブラリをmacで使用して、webサイトのサムネイルを取得する

概要 みなさんこんにちはcandleです。今回はsnappyを使用して、ウェブサイトのサムネイルを自動的に取得したいとおもいます。 snappyはそれ自体がhtmlを画像にするスクリプトではなく、wk …

CakePHPでhelloworld

概要 CakePHPでプログラミングのお約束helloworldを行いましょう。 helloworldとは動作確認も含めた、一番最初に書くプログラムコードです。 だいたいはhello worldと単純 …

railsのwebrickでi18nの言語切り分けをサブドメインで設定する

概要 みなさんこんにちはcandleです。最近では海外展開も視野に入れたwebアプリケーションの開発が行われることが多くなってきているような気がします。 そうなってくると、webアプリケーションの国際 …

React WebでURLをaタグのリンクにして表示する

概要 みなさんこんにちはcandleです。今回はReactでコメントなどに投稿されたURLからリンクを生成する方法を紹介します。しかし、URLからリンクの自動生成は結構危険です。無尽蔵にリンク化を許可 …

  • English
  • 日本語

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