Rails/ckeditor の履歴(No.2)

• 履歴一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• 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
  }
  
  

プラグイン†

• config.jsのextraPluginsで指定。複数あるときはカンマ区切り。

     config.extraPlugins = 'autolink,openlink'

ckeditor-autolink†

• Gnodiah/ckeditor-autolink…自動でリンクするプラグイン。

open link plugin†

• mlewand/ckeditor-plugin-openlink…エディタのリンク部分クリックでリンクをブラウザで表示するプラグイン。
• 以下のように修正すると、普通にクリックしただけで開けるようになる。

  //					ctrlClickHandlingNeeded = evt.data.$.ctrlKey && !CKEDITOR.env.gecko;
  					ctrlClickHandlingNeeded = true