Rails/ckeditor の履歴(No.1)

• 履歴一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• Rails/ckeditor へ行く。
  • 1 (2015-06-15 (月) 10:21:16)
  • 2 (2015-06-15 (月) 10:23:49)

Tag: Rails/ckeditor

目次†

関連ページ†

参考情報†

• JavaScriptのリッチテキストエディタckeditorをRailsに組み込めるようにgem化したものがいくつかある。
• galetahub/ckeditorが有名

インストール方法†

• Gemfileに追加し、bundle install。

  gem 'ckeditor'

• application.jsを変更。

  //= require ckeditor/init

• ビューで、text_areaをcktext_areaに編集する。

カスタマイズ†

ファイルの場所†

• 以下のファイルを修正する

  app/assets/javascripts/ckeditor/config.js
  app/assets/javascripts/ckeditor/contents.css
  

ツールバーのシンプル化†

• config.jsを編集。

  CKEDITOR.editorConfig = function (config) {
  
  config.extraPlugins = 'autolink,openlink'
  config.toolbar = [
      ['Format','FontSize']
      ,['Bold','Italic','Underline']
      ,['TextColor','BGColor']
      ,['RemoveFormat']
      ,['Link','Unlink','Anchor']
      ,['Source','Maximize','ShowBlocks']
  ];
  
  }
  
  

スタイルの修正†

• contents.cssを修正(config.jsでの修正は特に必要ないっぽい)。
• 例えばpタグのマージンをなくす。

  p {
      margin:0;
      padding:0
  }
  
  

プラグイン†