WYSIWYGといえばckeditor!ということで、ckeditorのインストールから画像のS3アップロードの設定までを書いていきます。
必要なgemをインストール
Gemfileに以下を追加し、bundle
でインストールします。
# Gemfile gem 'carrierwave',github: 'carrierwaveuploader/carrierwave' gem "fog" gem 'rmagick' gem 'mini_magick'
今回は画像のアップローダーとしてcarrierwaveを使います。オススメですしおすし。
carrierwaveの場合、なぜかmini_magick
がないとエラーになる鬼仕様なので画像処理にrmagick
だけ使う場合もmini_magick
が必要です。。
CKeditor + Carrierwave + RMagick Error · Issue #527 · galetahub/ckeditor
# ckeditor/lib/ckeditor/backend/carrierwave.rb require 'mini_magick' # なんでmini_magick固定やねん! module Ckeditor module Backend module CarrierWave ...
carrierwaveの設定を編集する
以下のコマンドを打つと、画像アップロードに必要なファイルの生成やルーティングの設定が行われます。
$ rails generate ckeditor:install --orm=active_record --backend=carrierwave
ちなみに、carrierwaveのほかにpaperclipやrefile、dragonfly(はじめて聞いた)にも対応してます。
carrierwaveをカスタマイズ
carrierwaveで画像をS3にアップロードするためにもろもろ設定が必要です。
この記事を参考にcarrierwave.rb
を編集すればOKです。
carrierwaveを使ってS3に画像をアップロードする - 49hack
アップローダーをカスタマイズ
uploaderのストレージをS3用のfog
に変更します。
# app/uploaders/ckeditor_picture_uploader.rb class CkeditorPictureUploader < CarrierWave::Uploader::Base include Ckeditor::Backend::CarrierWave include CarrierWave::RMagick # include CarrierWave::MiniMagick # include CarrierWave::ImageScience storage :fog # ここ
また、url_content
を変更することで、取得する画像のURLを変更することが可能です。
CDNのURLに変更したりするといいのではないでしょうか〜。
# app/models/ckeditor/picture.rb class Ckeditor::Picture < Ckeditor::Asset mount_uploader :data, CkeditorPictureUploader, :mount_on => :data_file_name # 画像アップロード時、または選択時にフォームにペーストされるURL def url_content ENV['CDN_URL'] +"/hoge/fuga/#{filename}" end end
ckeditorの設定を編集する
config.js
を編集することでckeditorをカスタマイズできます。
ツールバーの表示項目が多ければconfig.toolbar = ...
と記述すれば項目を限定することができます。詳しくはこちらをご覧ください。
Toolbar Configuration - CKEditor 4 Documentation
画像アップロードのボタン、タブを有効にするためには、config.filebrowserImageBrowseLinkUrl
などの記述が必要です。
設定は下記記事の内容をそのまま使用しました。CSRFトークンのもろもろの設定をしています。
// app/assets/javascripts/ckeditor/config.js CKEDITOR.editorConfig = function (config) { // The location of an external file browser, that should be launched when "Browse Server" button is pressed in the Link tab of Image dialog. config.filebrowserImageBrowseLinkUrl = "/ckeditor/pictures"; // The location of an external file browser, that should be launched when "Browse Server" button is pressed in the Image dialog. config.filebrowserImageBrowseUrl = "/ckeditor/pictures"; // The location of a script that handles file uploads in the Image dialog. config.filebrowserImageUploadUrl = "/ckeditor/pictures"; // Rails CSRF token config.filebrowserParams = function(){ var csrf_token, csrf_param, meta, metas = document.getElementsByTagName('meta'), params = new Object(); for ( var i = 0 ; i < metas.length ; i++ ){ meta = metas[i]; switch(meta.name) { case "csrf-token": csrf_token = meta.content; break; case "csrf-param": csrf_param = meta.content; break; default: continue; } } if (csrf_param !== undefined && csrf_token !== undefined) { params[csrf_param] = csrf_token; } return params; }; config.addQueryString = function( url, params ){ var queryString = []; if ( !params ) { return url; } else { for ( var i in params ) queryString.push( i + "=" + encodeURIComponent( params[ i ] ) ); } return url + ( ( url.indexOf( "?" ) != -1 ) ? "&" : "?" ) + queryString.join( "&" ); }; // Integrate Rails CSRF token into file upload dialogs (link, image, attachment and flash) CKEDITOR.on( 'dialogDefinition', function( ev ){ // Take the dialog name and its definition from the event data. var dialogName = ev.data.name; var dialogDefinition = ev.data.definition; var content, upload; if (CKEDITOR.tools.indexOf(['link', 'image', 'attachment', 'flash'], dialogName) > -1) { content = (dialogDefinition.getContents('Upload') || dialogDefinition.getContents('upload')); upload = (content == null ? null : content.get('upload')); if (upload && upload.filebrowser && upload.filebrowser['params'] === undefined) { upload.filebrowser['params'] = config.filebrowserParams(); upload.action = config.addQueryString(upload.action, upload.filebrowser['params']); } } }); }
I18nの設定も忘れずに
これがないとファイルブラウザでtranslation missing
になってデザインが崩れちゃうのでご注意ください。
ja: ckeditor: page_title: 'CKEditorファイルマネージャー' confirm_delete: 'ファイルを削除しますか?' buttons: cancel: 'キャンセル' upload: 'アップロード' delete: '削除' next: '次へ'
まとめ
ckeditorの設定まわりで結構ハマりましたが(なんせドキュメントが見にくい。。)、これでいい感じにアップローダーも連携できたのでもうやりたい放題です。
やっぱCarrierwave使いやすいな〜。
参考
- galetahub/ckeditor
- carrierwaveuploader/carrierwave
- ruby on railsのckeditorの画像のアップロード先をcarrierwaveとfogを使ってS3にする
- Toolbar Configuration - CKEditor 4 Documentation
- File Manager Integration - CKEditor 4 Documentation
- 使用 ckeditor gem - your site
- CKeditor + Carrierwave + RMagick Error · Issue #527 · galetahub/ckeditor
- carrierwaveを使ってS3に画像をアップロードする - 49hack