This article has been updated to reflect Rails 3.1. Original article at bottom

The main challenge

A typical requirement for Rails websites that features content is that the client needs a WYSIWYG editor that is as easy to use as Wordpress.

The main challenge for using Heroku to host a Rails CMS is getting a WYSIWYG editor to store image uploads for blog posts / pages on Amazon S3 instead of the local file system (a heroku constraint).

Ingredients

Add these to a Rails 3.1 app Gemfile and run 'bundle'

  gem 'typus'
  gem 'ckeditor'
  gem 'paperclip'
  gem 'aws-s3', :require => 'aws/s3'

A demo app

You can look at this app to see a working version: https://github.com/joshcrews/rails-typus-ckeditor-s3-blog

Steps

• Create a post and page model
  • rails g model post title:string body:text
  • rails g model page title:string body:text
• rake db:migrate
• generate typus (rails g typus)
• generate typus login (rails g typus:migration)
• rake db:migrate
• create "app/views/admin/templates/" and fill it with this:
• modify config/typus/posts.yml and config/typus/pages.yml to add options / templates / body to look something like:

  •           Post:
                fields:
                  default: title, body
                  form: title, body
                  options:
                    templates:
                      body: text_with_ckeditor
                filters: created_at
                search: title
                application: content
            

• rails generate ckeditor:install
• rails generate ckeditor:models --orm=active_record --backend=paperclip
• in config/application.rb add

  config.autoload_paths += %W(#{config.root}/app/models/ckeditor)

• create config/amazon_s3.yml

  •           development:
                bucket: bucket
                access_key_id: some_string
                secret_access_key:  some_string
    
              test:
                bucket: bucket
                access_key_id: some_string
                secret_access_key:  some_string
    
              production:
                bucket: bucket
                access_key_id: some_string
                secret_access_key:  some_string
            

• modify app/models/ckeditor/picture.rb for using s3

  •             has_attached_file :data,
                  :storage => :s3,
                  :s3_credentials => "#{Rails.root}/config/amazon_s3.yml",
                  :path => ":class/:id/:basename.:extension",
                  :styles => {}
              

• Done... I hope!

References for more help

• https://github.com/galetahub/ckeditor
• https://github.com/thoughtbot/paperclip
• https://github.com/typus/typus

---

Original article reflecting Rails 2.3

I love Heroku.  Their awesome Ruby hosting eliminates the system admin stuff that developers hate. But until recently it has been difficult to let users have a rich javascript editor for pages/posts because you can't upload files (like pictures) to the Heroku server. Until now! You can use the Typus Rails backend plugin along with rails-ckeditor plugin for a rich text editor and the Paperclip plugin to pass photos/files from the ckeditor through to Amazon S3. The hosting of ckeditor images/files off Heroku at S3 was the missing component for me using Heroku for most of my client's projects. Typus is not required; but its an excellent instant admin or backend to a Rails app.

How to do it

For Typus, follow their github instructions. Once Typus is installed, you modify fields in /config/typus/application.yml.  To activate a field for the ckeditor (rich text editor), copy the options/rich text code into the model.

Page:
  fields:
    list: name, title
    form: title, body
    show: id, title, body
    options:
      rich_text: body
  search: name
  application: Content

To turn on the rich text editor, run rake typus:ckeditor in the terminal. The default rich text editor is the "Basic" one, but you'll need the "Easy" or "Full" toolbar to upload images into text areas. To change this, search for _rich_text.html.erb; and edit it to say:

Now the hard part

The hard part is getting all the uploaded images/files to be passed "into the cloud"--over to Amazon S3.  If you have never used Paperclip to store images/files on Amazon S3 in Rails, stop now to experiment with that.  It will be a great investment and I'm sure you'll use it in a future project. If you already have Paperclip setup to save attachments to Amazon S3, you are ready to continue. The authoritative reference is the rails-ckeditor readme at github.

My summary of the steps

• script/generate model Asset
• Copy the CreateAsset migration files from the /vendor/plugins/rails-ckeditor/examples/migrations folder and overwrite the migration waiting to happen in db/migrate
• Run rake db:migrate
• Copy the entire code from vendor/plugins/rails-ckeditor/examples/models/paperclip/models/asset.rb to your app/models/asset.rb file.
• Paste the example files from vendor/plugins/rails-ckeditor/examples/s3 folder for picture.rb and attachment_file.rb into your apps/model folder
• (Note picture.rb and attachment_file.rb are inheriting from asset.rb--that's important)
• I had to modify picture.rb to tell it 1) where my amazon_s3.yml file was, 2) to elimate the :bucket option (because it's specified in my yml file), 3) I liked this path below better than the example.My modified picture.rb section:

  		has_attached_file :data,
    :s3_credentials => "#{Rails.root}/config/amazon_s3.yml",
    :storage => :s3,
    :path => ":class/:style/:id/:basename.:extension",
    :styles => { :content => '575>', :thumb => '100x100' }

• Do the same this you did for picture.rb for attachment_file.rb

Done!

Ok, try script/server and see if its good! Problems, corrections in the comments. Also, you can use ckeditor in your front end, just see the rails-ckeditor readme.