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

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。

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2016-04-13 (水) 16:47:30