rich 1.2.0 → 1.3.0

data/README.rdoc

@@ -2,7 +2,7 @@
 
 {<img src="https://github.com/bastiaanterhorst/rich/raw/master/app/assets/images/rich/rich.png" />}[https://github.com/bastiaanterhorst/rich/] Rich is an opinionated implementation of CKEditor for Rails 3.2 and up. It includes a stripped down toolbar, simplified dialogs and a custom file manager. The file manager can also be used separate from CKEditor.
 
-Presently, Rich integrates with Active Admin, Rails Admin and vanilla Formtastic (versions 1 and 2).
+Presently, Rich integrates with Active Admin, Rails Admin and vanilla Formtastic (versions 1 and 2). Uploaded files can be stored on the filesystem, or on S3 (via Paperclips built-in S3 support).
 
 == Goals
 
@@ -26,7 +26,7 @@ Rich is available as a Ruby Gem, which makes installation very easy.
   gem 'rich'
   # the edge (unstable) version can be had using:
   # gem 'rich', :git => 'https://github.com/bastiaanterhorst/rich.git'
-  
+
 After updating your bundle, run the installer.
 
   $> rails generate rich:install
@@ -34,10 +34,10 @@ After updating your bundle, run the installer.
 The installer sets up a route, creates an initializer for configuration and adds a javascript and CSS file. It also creates a migration, so we need to migrate the database.
 
   $> rake db:migrate
-  
+
 As a last step, secure the file manager by setting your authentication method in <tt>/config/initializers/rich.rb</tt>. If you're using Devise with an AdminUser model (incidentally, the Active Admin defaults):
   config.authentication_method = :authenticate_admin_user!
-  
+
 You're good to go.
 
 == Usage
@@ -51,17 +51,17 @@ To use Rich, it's javascript file must be loaded. By default, this is already se
 In your formtastic form, use <tt>:as => :rich</tt> to insert Rich. Like so:
 
   <%= semantic_form_for @post do |f| %>
-     <%= f.inputs do %>
-       <%= f.input :name %>
-       <%= f.input :title %>
-	   <%= f.input :featured_image, :as => :rich_picker %>
-       <%= f.input :body, :as => :rich, :config => { :default_style => "myCrazyPaperclipStyle" } %>
-     <% end %>
-     <%= f.buttons do %>
-       <%= f.commit_button %>
-     <% end %>
-   <% end %>
-   
+    <%= f.inputs do %>
+      <%= f.input :name %>
+      <%= f.input :title %>
+      <%= f.input :featured_image, :as => :rich_picker %>
+      <%= f.input :body, :as => :rich, :config => { :default_style => "myCrazyPaperclipStyle" } %>
+    <% end %>
+    <%= f.buttons do %>
+      <%= f.commit_button %>
+    <% end %>
+  <% end %>
+
 === Active Admin
 
 Since Active Admin actually uses Formtastic, you can use it with Rich out of the box. In your model configuration file, set up your form like this. Make sure you add <tt>//= require rich</tt> to your <tt>app/assets/javascripts/active_admin.js</tt>.
@@ -70,11 +70,11 @@ Since Active Admin actually uses Formtastic, you can use it with Rich out of the
     f.inputs "Basic info" do
       f.input :title
       f.input :featured_image, :as => :rich_picker, :config => { :style => 'width: 400px !important;' }
-	    f.input :body, :as => :rich, :config => { :width => '76%', :height => '400px' }
+      f.input :body, :as => :rich, :config => { :width => '76%', :height => '400px' }
     end
     f.buttons
   end
-  
+
 === Rails Admin
 
 To use Rich in your RA forms, use the following in your initializer:
@@ -83,9 +83,9 @@ To use Rich in your RA forms, use the following in your initializer:
     edit do
       field :title
       field :body, :rich_editor do
-         config({ 
-           :insert_many => true 
-         })
+        config({
+          :insert_many => true
+        })
       end
     end
   end
@@ -98,7 +98,7 @@ To use the image picker on a string field, do this:
       :view_mode => "list"
     })
   end
-  
+
 == Screenshots
 
 This is the editor with default settings (shown here in Rails Admin).
@@ -119,7 +119,7 @@ Rich works just fine in production mode. To accomodate the structure of the CKEd
 Rich will also clean up these CKEditor files when you clean your assets. Like this:
 
   rake assets:clean
-  
+
 Although generally not necessary, the underlying Rich tasks can be invoked directly.
 
   rake rich:assetize_ckeditor
@@ -153,7 +153,25 @@ When you change styles after uploading files, you will need to re-process those
 
 === Using the file manager without CKEditor
 
-Besides from within the editor, the file manager can also be used on it's own. See the <tt>rich_picker</tt> examples above. One important thing to note is that this requires a string field on the receiving object. A direct connection to the <tt>Rich::RichFile</tt> object is not supported at this time.
+Besides from within the editor, the file manager can also be used on it's own. See the <tt>rich_picker</tt> examples above. One important thing to note is that this requires a string field on the receiving object. If you provide an input field that's #ID ends in <tt>_id</tt>, the picker will return the ID of the <tt>Rich::RichFile</tt> object (for use in a relation perhaps?). If the #ID of the input ends in anything else, it will return the URL of the asset you selected.
+
+Pass the config option <tt>:hidden_input => true</tt> to use a hidden text field.
+
+Pass the config option <tt>:preview_size => '100px'</tt> to specify the size of the image you want to preview, otherwise the full size version of the image you pick will be shown.
+
+Pass the config option <tt>:placeholder_image => image_path('placeholder.png')</tt> to show a placeholder image that will be replaced when an asset has been selected.
+
+You might use this in a relation like this in ActiveAdmin:
+
+  form do |f|
+    f.inputs do
+      f.input :title
+    end
+    f.has_many :assets do |asset_form|
+      asset_form.input :rich_file_id, :as => :rich_picker, :config => {:style => 'width: 400px !important;', :hidden_input => true, :placeholder_image => image_path('placeholder.png'), :preview_size => :thumb}
+    end
+    f.buttons
+  end
 
 === Non-image uploads
 
@@ -186,7 +204,7 @@ It is possible to limit the files available in the file manager to a more releva
 To scope the file manager to a collection of your choosing, pass the collection name into the <tt>:scoped</tt> configuration option. This collection name is just a string; pick anything you like. In Rails Admin:
 
   field :cover_images, :rich_editor do
-    config({ 
+    config({
       :scoped => "book covers"
     })
   end
@@ -194,7 +212,7 @@ To scope the file manager to a collection of your choosing, pass the collection
 To scope the filemanager to a specific object, simply pass in <tt>true</tt>. Again for Rails Admin:
 
   field :body, :rich_editor do
-    config({ 
+    config({
       :scoped => true
     })
   end
@@ -203,6 +221,20 @@ In the latter example (scoping to an object), it is up to you to determine if sc
 
 Also note that none of this is secure. At all. It is purely meant as a convenience to save you from wading through tons of irrelevant files. If need to hide files from prying eyes, you need something else.
 
+=== Uploading to S3
+
+Paperclip (which Rich uses to handle uploads) supports S3 out of the box. Just add the following to you environment:
+
+  Paperclip::Attachment.default_options.merge!(
+    :storage => :s3,
+    :bucket => ENV['S3_BUCKET'],
+    :url => "/system/:class/:attachment/:id/:style/:filename",
+    :s3_credentials => {
+      :access_key_id => ENV['S3_ACCESS_KEY_ID'],
+      :secret_access_key => ENV['S3_SECRET_ACCESS_KEY']
+    }
+  )
+
 == Planned features & ideas
 
 * drag & drop uploading

data/app/assets/javascripts/rich/browser/filebrowser.js

@@ -34,8 +34,11 @@ rich.Browser.prototype = {
 		});
 		
 		browser.selectStyle(def);
-		
-		if(opt.length < 2) {
+
+    //check if we are inserting an object
+    var split_field_name = $.QueryString["dom_id"].split('_');
+
+		if(opt.length < 2 || split_field_name[split_field_name.length - 1] == "id") {
 			$('#styles').hide();
 			browser.selectStyle(opt[0]);
 		}
@@ -96,7 +99,7 @@ rich.Browser.prototype = {
 		
 		
 		if($.QueryString["CKEditor"]=='picker') {
-			window.opener.assetPicker.setAsset($.QueryString["dom_id"], url)
+			window.opener.assetPicker.setAsset($.QueryString["dom_id"], url, id, type);
 		} else {
 			window.opener.CKEDITOR.tools.callFunction($.QueryString["CKEditorFuncNum"], url, id, name);			
 		}

data/app/assets/javascripts/rich/editor/ckeditor_path.js.erb

@@ -0,0 +1 @@
+var CKEDITOR_BASEPATH = '<%= asset_path("ckeditor/") %>';

data/app/assets/javascripts/rich/editor/rich_picker.js

@@ -26,9 +26,17 @@ rich.AssetPicker.prototype = {
 		window.open(url, 'filebrowser', "width=860,height=500")
   },
 
-	setAsset: function(dom_id, asset){
-		$(dom_id).val(asset);
-		$(dom_id).siblings('img.rich-image-preview').first().attr({src: asset});
+	setAsset: function(dom_id, asset, id, type){
+		var split_field_name = $(dom_id).attr('id').split('_')
+		if (split_field_name[split_field_name.length - 1] == "id") {
+			$(dom_id).val(id);
+		} else {
+			$(dom_id).val(asset);
+		}
+
+    if(type=='image') {
+		  $(dom_id).siblings('img.rich-image-preview').first().attr({src: asset});
+    }
   }
 
 };

data/app/inputs/rich_picker_input.rb

@@ -1,28 +1,88 @@
 if (Object.const_defined?("Formtastic") && Gem.loaded_specs["formtastic"].version.version[0,1] == "2")
-    
+
     class RichPickerInput < ::Formtastic::Inputs::StringInput
+      include Formtastic::Helpers::InputHelper
+      attr_reader :editor_options
+
+      def to_html
+        @editor_options = Rich.options(options[:config], object_name, object.id)
 
-      def to_html 
-        scope_type = object_name
-        scope_id = object.id
-        editor_options = Rich.options(options[:config], scope_type, scope_id)
-        
         local_input_options = {
           :class => 'rich-picker',
           :style => editor_options[:style]
         }
 
         input_wrapping do
-
           label_html <<
-          builder.text_field(method, local_input_options.merge(input_html_options)) <<
-          " <a href='#{Rich.editor[:richBrowserUrl]}' class='button'>#{I18n.t('picker_browse')}</a>".html_safe <<
-          "</br></br><img class='rich-image-preview' src='#{@object.send(method)}' style='height: 100px' />".html_safe <<
-          "<script>$(function(){$('##{input_html_options[:id]}_input a').click(function(e){ e.preventDefault(); assetPicker.showFinder('##{input_html_options[:id]}', #{editor_options.to_json.html_safe})})})</script>".html_safe
+          input_field(local_input_options) <<
+          button <<
+          preview <<
+          javascript
+
+        end
+      end
+private
 
+      def input_field(local_input_options)
+        if editor_options[:hidden_input] == true
+          builder.hidden_field(method, local_input_options.merge(input_html_options))
+        else
+          builder.text_field(method, local_input_options.merge(input_html_options))
         end
       end
 
+      def preview_image_path
+        method_value = object.send(method)
+
+        # return placeholder image if this is a non-image picker OR if there is no value set
+        return editor_options[:placeholder_image] if editor_options[:type].to_s == 'file'
+        return editor_options[:placeholder_image] unless method_value.present?
+
+        column_type = column_for(method).type
+        if column_type == :integer
+          file = Rich::RichFile.find(method_value)
+          file.rich_file.url(:rich_thumb) #we ask paperclip directly for the file, so asset paths should not be an issue
+        else # should be :string
+          method_value
+        end
+      end
+
+      def button
+        %Q{
+            <a href='#{Rich.editor[:richBrowserUrl]}' class='button'>
+              #{I18n.t('picker_browse')}
+            </a>
+        }.html_safe
+      end
+
+      def javascript
+        %Q{
+            <script>
+              $(function(){
+                $('##{input_html_options[:id]}_input a').click(function(e){
+                  e.preventDefault(); assetPicker.showFinder('##{input_html_options[:id]}', #{editor_options.to_json})
+                });
+              });
+            </script>
+        }.html_safe
+      end
+
+      def preview
+        return unless editor_options[:type] != 'file'
+
+        path = preview_image_path
+        klass = "class='rich-image-preview'"
+        style = "style='max-width:#{editor_options[:preview_size]}; max-height:#{editor_options[:preview_size]};'"
+        if path
+          %Q{
+             </br></br><img src='#{preview_image_path}' #{klass} #{style} />
+          }.html_safe
+        else
+          %Q{
+             </br></br><div #{klass} #{style}></div>
+          }.html_safe
+        end
+      end
     end
-    
-end
+
+end

data/app/views/rails_admin/main/_form_rich_picker.html.haml

@@ -1,9 +1,7 @@
 = javascript_include_tag "rich/base.js"
-= form.send field.view_helper, field.method_name, field.html_attributes
+= form.send field.view_helper, field.method_name, field.html_attributes.merge({:style=> (if field.editor_options[:hidden_input]==true then "visibility:hidden;position:absolute" else "" end )})
 = link_to t('picker_browse').capitalize, Rich.editor[:richBrowserUrl], :class => "btn create"
-- unless field.value.to_s.html_safe == ''
-	%br
-	%br
-	%img{:src => field.value.html_safe, :style => 'height: 100px', :class => 'rich-image-preview'}
+- unless field.editor_options[:type]==:file
+  %img{:src => field.preview_image_path, :style => "padding: 10px 0; display: block; max-width: #{field.editor_options[:preview_size]}; max-width: #{field.editor_options[:preview_size]};", :class => 'rich-image-preview'}
 = javascript_tag do
-	$(function(){$('##{form.dom_id(field)}_field a').click(function(e){ e.preventDefault(); assetPicker.showFinder('##{form.dom_id(field)}', #{Rich.options(field.config, field.scope_type, field.scope_id).to_json.html_safe})})})
+  $(function(){$('##{form.dom_id(field)}_field a').click(function(e){ e.preventDefault(); assetPicker.showFinder('##{form.dom_id(field)}', #{field.editor_options.to_json.html_safe})})})

data/lib/generators/rich/install/install_generator.rb

@@ -18,7 +18,7 @@ module Rich
       end
       
       def install_editor_styles
-        copy_file '../../../../../app/assets/stylesheets/rich/rich_editor.css', 'app/assets/stylesheets/rich/editor.css'
+        copy_file '../../../../../app/assets/stylesheets/rich/editor.css', 'app/assets/stylesheets/rich/editor.css'
       end
       
       def install_javascript

data/lib/generators/rich/install/templates/rich.rb.erb

@@ -15,6 +15,7 @@ if Object.const_defined?("Rich")
     # By default, Rich visualizes what type of element
     # you are editing. To disable this:
     #   config.editor[:startupOutlineBlocks] = false
+
     
     # == Image styles
     # 

data/lib/rich.rb

@@ -6,7 +6,7 @@ end
 require "rich/engine"
 
 module Rich
- 
+
   # configure image styles
   def self.image_styles
       @@image_styles.merge({ :rich_thumb => "100x100#" })
@@ -44,16 +44,21 @@ module Rich
   
   mattr_accessor :allowed_document_types
   @@allowed_document_types = :all
-  
-  mattr_accessor :file_storage
-  @@file_storage
-  
-  mattr_accessor :s3_credentials
-  @@s3_credentials
-  
+
   mattr_accessor :file_path
   @@file_path
-  
+
+  # configuration for picker
+  mattr_accessor :placeholder_image
+  @@placeholder_image = "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" # a transparent pixel
+
+  mattr_accessor :preview_size
+  @@preview_size = "100px"
+
+  mattr_accessor :hidden_input
+  @@hidden_input = false
+  # end configuration for picker
+
   # Configuration defaults (these map directly to ckeditor settings)
   mattr_accessor :editor
   @@editor = {
@@ -61,7 +66,7 @@ module Rich
     :stylesSet  =>  [],
     :extraPlugins => 'stylesheetparser,richfile,MediaEmbed,audio',
     :removePlugins => 'scayt,menubutton,contextmenu,image,forms',
-    :contentsCss => '/assets/rich/editor.css',
+    :contentsCss => :default,
     :removeDialogTabs => 'link:advanced;link:target',
     :startupOutlineBlocks => true,
     :forcePasteAsPlainText => true,
@@ -88,13 +93,20 @@ module Rich
       :default_style => self.default_style,
       :insert_many => self.insert_many,
       :allow_document_uploads => self.allow_document_uploads,
-      :allow_embeds => self.allow_embeds
+      :allow_embeds => self.allow_embeds,
+      :placeholder_image => self.placeholder_image,
+      :preview_size => self.preview_size,
+      :hidden_input => self.hidden_input
     }
     editor_options = self.editor.merge(base)
     
     # merge in local overrides
     editor_options.merge!(overrides) if overrides
-    
+
+    # if the contentcss is set to :default, use the asset pipeline
+    editor_options[:contentsCss] = ActionController::Base.helpers.stylesheet_path('rich/editor.css') if editor_options[:contentsCss] == :default
+
+
     # update the language to the currently selected locale
     editor_options[:language] = I18n.locale
     
@@ -155,7 +167,6 @@ module Rich
         true
       end
     end
-    
   end
   
   def self.setup
@@ -163,11 +174,6 @@ module Rich
   end
   
   def self.insert
-    
-    
-    
-    
-    
     # manually inject into Formtastic 1. V2 is extended autmatically.
     if Object.const_defined?("Formtastic")
       if(Gem.loaded_specs["formtastic"].version.version[0,1] == "1")

data/lib/rich/engine.rb

@@ -7,7 +7,7 @@ module Rich
     isolate_namespace Rich
 
     initializer "rich.add_middleware" do |app|
-      app.config.assets.precompile += %w(rich/base.js rich/editor.css rich/rich_editor.css)
+      app.config.assets.precompile += %w(rich/base.js rich/editor.css)
       app.middleware.use 'Rack::RawUpload', :paths => ['/rich/files']
     end