Rails/ckeditor

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
  

トラブルシューティング†

CKEDITOR undefinedと表示される†

• application.jsで require_tree .があると、プラグイン設定ファイルなどが先に読みこまれてエラーになる模様require_treeを削除すればとりあえずOK。

Contents

メニュー

• about
• blog
• blog(はてな)

配布物

• FaEdit
  • ヘルプ
  • BugTrack
• WikiHelpMaker
  • ヘルプ
  • BugTrack

ゲーム

• 時のオカリナ3DS
• ドラゴンズドグマ
• スプラトゥーン2
• DQB2
• ジョイコン

ショートカット

• 用語集A-Z
• 用語集ア-ワ

今日の20件

最新の20件