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を用いて解説する

SPONSORED LINK


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

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

関連記事

ruby on railsのgemのインストールで不要なファイルをインストールしない設定

概要 みなさんこんにちはcandleです。私の記事はどうしても先人のプログラマーがまとめた内容を追試しているような感じになっていますが、これも重要なことなので、忘れないためにもまとめておきます。 ru …

phpmyadminでmysqlデータベースの照合順序を変更する

概要 みなさんこんにちはcandleです。 ちょっとした事なのですが、意外に分からなかったのでまとめました。 phpmyadminを使ってデータベースを作ると、うっかり、utf8_general_ci …

railsのaws-sdk gemを使ってs3に画像ファイルをフォームからアップロードする

概要 みなさんこんにちはcandleです。比較的難しいrailsからs3に画像をアップロードする方法を試してみましょう。 一般にサーバ環境にはスケーラビリティ(アクセスの規模に応じて、動的にサーバを動 …

railsのform_forとstrong parametersを使用して画像をアップロードする

概要 みなさんこんにちはcandleです。今回はrailsのform_forを使って、railsプロジェクトのpublicディレクトリに画像をアップロードしてみましょう。 form_forは基本的にデ …

wordpressのbogoプラグインのショートコードをカスタマイズする

English 日本語 概要 みなさんこんにちはcandleです。 今回はwordpress bogoのショートコードをカスタマイズしてみたいと思います。 紹介する項目は以下の2つです。 国旗の表示、 …

  • English
  • 日本語

プロフィール


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

スポンサードリンク

アーカイブ