joppot

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

プログラミング

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

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

Pocket

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

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

関連記事

React NativeでGoogle Chrome上でのデバッグ時に動作が遅くなる場合の対処

English 日本語 概要 みなさんこんにちはcandleです。 今回はReact NativeのデバッグでChromeを使うと シミュレーターの動作が遅くなってしまう問題を対処します。 とは言って …

macにmiddlemanの環境構築をする

概要 みなさんこんにちはcandleです。今回はmacにmiddlemanの環境構築をしてみたいと思います。 middlemanといえばwebサイト作成支援ツールみたいなものです。 githubやhe …

wordpressのbogoでサイトで使用する言語を「en-US」から「en」に変更する方法

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

railsの多対多リレーションでcounter culture を使用する

概要 みなさんこんにちはcandleです。 今回は多対多のリレーションが貼られているrailsアプリケーションで、counter cultureを使ってレコード数を数えてみたいと思います。 以下のよう …

ruby on railsのckeditorの画像のアップロード先をcarrierwaveとfogを使ってS3にする

概要 railsのckeditorはデフォルトでrailsのuploadsフォルダにアップロードしますが、 それだとサーバの容量を取ってしまうので、画像のアップロード先をS3に上げてみたいと思います。 …

  • English
  • 日本語

プロフィール


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

スポンサードリンク

アーカイブ