rich 0.0.8 → 1.0.0

data/README.rdoc

@@ -1,6 +1,6 @@
 = Rich
 
-Rich is an opinionated implementation of CKEditor for Rails 3.1. It includes a stripped down toolbar, simplified dialogs and a custom file manager.
+{<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.1 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).
 
@@ -10,10 +10,14 @@ Presently, Rich integrates with Active Admin, Rails Admin and vanilla Formtastic
 2. Sensible defaults. We don't want our users to insert tables, smilies or other frivolities that will do nothing but ruin a lovingly crafted design.
 3. Make it easy to customize these defaults.
 4. Implement a usable (and easily configurable) file manager that serves up images that fit your specific design.
-5. A good upload experience, but no flash.
+5. A good upload experience (multiple uploads, progress bars, pure html/js).
 
 It should be noted that while a major point of this project was to remove many things from CKEditor, all that stuff is still in there and can be easily re-enabled.
 
+== Dependency Status
+
+{<img src="https://gemnasium.com/bastiaanterhorst/rich.png" />}[https://gemnasium.com/bastiaanterhorst/rich/]
+
 == Quick install
 
 Rich is available as a Ruby Gem, which makes installation very easy.
@@ -50,7 +54,8 @@ In your formtastic form, use <tt>:as => :rich</tt> to insert Rich. Like so:
      <%= f.inputs do %>
        <%= f.input :name %>
        <%= f.input :title %>
-       <%= f.input :body, :as => :rich, :editor => { :defaultStyle => "myCrazyPaperclipStyle" } %>
+	   <%= f.input :featured_image, :as => :rich_picker %>
+       <%= f.input :body, :as => :rich, :config => { :default_style => "myCrazyPaperclipStyle" } %>
      <% end %>
      <%= f.buttons do %>
        <%= f.commit_button %>
@@ -64,7 +69,8 @@ Since Active Admin actually uses Formtastic, you can use it with Rich out of the
   form do |f|
     f.inputs "Basic info" do
       f.input :title
-      f.input :body, :as => :rich, :editor => { :width => '76%', :height => '400px' }
+      f.input :featured_image, :as => :rich_picker, :config => { :style => 'width: 400px !important;' }
+	  f.input :body, :as => :rich, :config => { :width => '76%', :height => '400px' }
     end
     f.buttons
   end
@@ -77,12 +83,7 @@ If you're annoyed by the fact that the Rich editor overlaps the field label (I w
   
 === Rails Admin
 
-To use Rich in your RA forms, first add the following lines to your <tt>/config/initializers/rails_admin.rb</tt>.
-
-  require 'rich/integrations/rails_admin_editor'
-  RailsAdmin::Config::Fields::Types::register(Rich::Integrations::RailsAdmin::RichEditor)
-  
-This will enable the <tt>rich_editor</tt> field type. You can use this field as follows:
+To use Rich in your RA forms, use the following in your initializer:
 
   config.model Post do
     edit do
@@ -94,6 +95,16 @@ This will enable the <tt>rich_editor</tt> field type. You can use this field as
       end
     end
   end
+
+To use the image picker on a string field, do this:
+
+  field :title, :rich_picker do
+    config({
+      :type => 'image',
+      :allowed_styles => [:original],
+      :view_mode => "list"
+    })
+  end
   
 == Screenshots
 
@@ -105,11 +116,11 @@ This is the file manager.
 
 == Rich in production mode
 
-Rich works fine in production mode, as long as you make sure to precompile your assets. Rich extends the <tt>assets:precompile</tt> task to make sure the full CKEditor source tree is copied to your assets folder. So make sure you precompile your assets before starting production mode (something you most likely are doing anyway).
+Rich works just fine in production mode. To accomodate the structure of the CKEditor source, Rich extends the <tt>assets:precompile</tt> task to make sure the full CKEditor source tree is copied to your assets folder. So the following works as you would expect:
 
   rake assets:precompile
 
-Rich will also clean up these CKEditor files when you clean your assets. So the following works as expected.
+Rich will also clean up these CKEditor files when you clean your assets. Like this:
 
   rake assets:clean
   
@@ -122,9 +133,15 @@ Although generally not necessary, the underlying Rich tasks can be invoked direc
 
 Take a look at the generated <tt>rich.rb</tt> initializer and – if you want to dig deeper – the Rich sourcecode. The initializer guides you through the most important settings and configuration options.
 
+=== Localization
+
+Localization should be automatic. Rich uses the currently set locale (<tt>I18n.locale</tt>) for it's editor and file browser.
+
 === CKEditor configuration
 
-Rich attempts to provide you with a sensible set of buttons and capabilities. But of course, you might disagree. To that end, you can configure CKEditor through the <tt>editor</tt> directive, either globally through the initializer, or per editor instance as an option.
+Rich attempts to provide you with a sensible set of buttons and capabilities. But of course, you might disagree. To that end, you can configure CKEditor through the <tt>config</tt> directive, either globally through the initializer, or per editor instance as an option.
+
+Rich also includes a few settings that manipulate CKEditor settings, but are a bit easier to use. For example, you can set <tt>:allow_embeds</tt> to <tt>true</tt> to load a media embed plugin (think Youtube, Vimeo, etc.)
 
 === Editor styles
 
@@ -138,12 +155,56 @@ When you change styles after uploading files, you will need to re-process those
 
   rake rich:refresh_assets
 
+=== 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.
+
+=== Non-image uploads
+
+To enable uploads of non-image files, set the following in your Rich initializer:
+
+  # enable document uploads. default is false.
+  config.allow_document_uploads = true
+  # restrict the type of files that can be uploaded. defaults to :all for no restrictions.
+  config.allowed_document_types = ['application/pdf']
+
+This will enable a new button on your CKEditor toolbar where you can upload regular files. Keep in mind that even if an image is uploaded through this method, it will not go through any processing you might have set up for your images.
+
+Non-image uploads also work from within the file picker. A Rails Admin example:
+
+  field :title, :rich_picker do
+    config({
+      :type => 'file',
+      :allowed_styles => [:original] #only original makes sense for non-images
+    })
+  end
+
+=== Media embedding (Youtube, Vimeo, etc.)
+
+Set <tt>:allow_embeds</tt> to <tt>true</tt> to enable an extra button on the CKEditor toolbar that enables you to insert embed code. This works by virtue of the MediaEmbed plugin for CKEditor. It's not pretty, but it works.
+
+=== Scoping (filtering in the file manager)
+
+It is possible to scope any files available in the file manager to the current object you are editing. This works by associating your objects type and its <tt>id</tt> with any uploaded files.
+
+To enable scoping for a Rich editor or picker, simply pass in the <tt>:scoped</tt> option and set it to <tt>true</tt>. A Rails Admin example:
+
+  field :body, :rich_editor do
+    config({ 
+      :scoped => true
+    })
+  end
+
+Note that it is up to you to determine if scoping is possible. For example, a new object has no id yet, so there is nothing to scope to (yet). You could hide Rich in that case, until the object has been saved. If you do enable Rich but there is no id to scope to, Rich will disable scoping until an id has been set. This will effectively hide any files previously uploaded (before the save), which is most likely not what you want. So think twice about using this option, and implement it correctly when you do.
+
+Also note that this is not 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.
+
 == Planned features
 
-* Scoping assets to other objects
-* Drag & drop uploading
-* separate form control to select/upload images without CKEditor
-* localization support
+* drag & drop uploading
+* finding/filtering assets
+* live image cropping
+* live image rotation
 
 == Inspiration
 
@@ -153,9 +214,16 @@ When you change styles after uploading files, you will need to re-process those
 
 == Tools used
 
+* Ckeditor - http://ckeditor.com/
 * Valum's FileUploader - https://github.com/valums/file-uploader
 * Rack Raw Upload - https://github.com/newbamboo/rack-raw-upload
 * Paperclip - https://github.com/thoughtbot/paperclip
+* Silk icons - http://www.famfamfam.com/lab/icons/silk/
+* Iconic icons - http://somerandomdude.com/work/iconic/
+
+== Contributing
+
+Your contributions (small and large) are very welcome! Please fork the project, make your changes and send me a pull request. If you are considering adding new functionality, or if you found a bug, please open an issue on Github first.
 
 == Copyright
 

data/app/assets/javascripts/rich/base.js

@@ -3,4 +3,4 @@
 //= require ckeditor/ckeditor
 //= require ckeditor/adapters/jquery
 //= require rich/editor/rich_editor
-//= require rich/editor/rich_finder
+//= require rich/editor/rich_picker

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

@@ -9,7 +9,8 @@ rich.Browser = function(){
 		insertionModeMany: false,
 		currentPage: 1,
 		loading: false,
-		reachedBottom: false
+		reachedBottom: false,
+		viewModeGrid: true
 	};
 	
 };
@@ -17,13 +18,13 @@ rich.Browser = function(){
 rich.Browser.prototype = {
 	
 	initialize: function() {
-		
 		// intialize styles
 		this.initStyles($.QueryString["allowed_styles"], $.QueryString["default_style"]);
 		
 		// initialize image insertion mode
 		this._options.insertionModeMany = ($.QueryString["insert_many"]=="true")?true:false;
 		this.toggleInsertionMode(false);
+    	this.toggleViewMode(false);
 	},
 	
 	initStyles: function(opt, def) {
@@ -33,6 +34,11 @@ rich.Browser.prototype = {
 		});
 		
 		browser.selectStyle(def);
+		
+		if(opt.length < 2) {
+			$('#styles').hide();
+			browser.selectStyle(opt[0]);
+		}
 	},
 	
 	setLoading: function(loading) {
@@ -50,7 +56,7 @@ rich.Browser.prototype = {
 		this._options.currentStyle = name;
 		$('#styles li').removeClass('selected');
 		$('#style-'+name).addClass('selected');	
-  },
+    },
 
 	toggleInsertionMode: function(switchMode) {
 		if(switchMode==true) this._options.insertionModeMany = !this._options.insertionModeMany;
@@ -63,14 +69,37 @@ rich.Browser.prototype = {
 	    $('#insert-many').hide();
 	  }
 	},
+
+    toggleViewMode: function(switchMode) {
+      if(switchMode==true) {
+        this._options.viewModeGrid = !this._options.viewModeGrid;
+      } else {
+        this._options.viewModeGrid = ($.QueryString["viewMode"]=="grid") ? false : true;
+      }
+
+      if(this._options.viewModeGrid == true) {
+        $('#view-grid').hide();
+        $('#view-list').show();
+        $('#items').addClass('list');
+      } else {
+        $('#view-grid').show();
+        $('#view-list').hide();
+        $('#items').removeClass('list');
+      }
+    },
 	
 	selectItem: function(item) {
 		var url = $(item).data('uris')[this._options.currentStyle];
 		var id = $(item).data('rich-asset-id');
 		var type = $(item).data('rich-asset-type');
+		var name = $(item).data('rich-asset-name');
+		
 		
-		// differentiate between CKEditor browsing and direct asset selection
-		window.opener.CKEDITOR.tools.callFunction($.QueryString["CKEditorFuncNum"], url, id);
+		if($.QueryString["CKEditor"]=='picker') {
+			window.opener.assetPicker.setAsset($.QueryString["dom_id"], url)
+		} else {
+			window.opener.CKEDITOR.tools.callFunction($.QueryString["CKEditorFuncNum"], url, id, name);			
+		}
 		
 		// wait a short while before closing the window or regaining focus
 		var self = this;
@@ -118,10 +147,10 @@ var browser;
 $(function(){
 	
 	browser = new rich.Browser();
-	new rich.Uploader();
-
 	browser.initialize();
 	
+	new rich.Uploader();
+
 	// hook up insert mode switching
 	$('#insert-one, #insert-many').click(function(e){
 		browser.toggleInsertionMode(true);
@@ -129,6 +158,13 @@ $(function(){
     return false;
   });
 
+  // hook up insert view switching
+  $('#view-grid, #view-list').click(function(e){
+    browser.toggleViewMode(true);
+    e.preventDefault();
+    return false;
+  });
+
 	// hook up style selection
 	$('#styles li').click(function(e){
 		browser.selectStyle($(this).data('rich-style'));

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

@@ -6,7 +6,11 @@ rich.Uploader = function(){
 	
 	this._options = {
 		uploadButtonId: 'upload',
-		insertionPoint: 'uploadBlock'
+		insertionPoint: 'uploadBlock',
+		uploadType: $.QueryString["type"],
+		scoped: $.QueryString["scoped"],
+		scope_type: $.QueryString["scope_type"],
+		scope_id: $.QueryString["scope_id"]
 	};
 	
 	// create the qq uploader
@@ -15,8 +19,13 @@ rich.Uploader = function(){
 	  button: document.getElementById(self._options.uploadButtonId),
 		multiple: true,
 		maxConnections: 3,
-		action: $("#new_rich_rich_image").attr("action"),
-		params: { authenticity_token: $("input[name='authenticity_token']").attr("value") },
+		action: $("#new_rich_file").attr("action"),
+		params: { authenticity_token: $("input[name='authenticity_token']").attr("value"),
+		 	      simplified_type: this._options.uploadType,
+				  scoped: this._options.scoped,
+				  scope_type: this._options.scope_type,
+				  scope_id: this._options.scope_id
+		},
 		debug: true,
 		onComplete: function(id, fileName, responseJSON) { self.uploadComplete(id, fileName, responseJSON); },
 		onSubmit: function(id, fileName) { self.uploadSubmit(id, fileName); },
@@ -37,7 +46,8 @@ rich.Uploader.prototype = {
 			});
     } else {
 				$('#up'+id+' .spinner').first().addClass("error");
-				$('#up'+id+' .spinner').first().removeClass("spinning");		
+				$('#up'+id+' .spinner').first().removeClass("spinning");
+                $('#up'+id+' .progress-bar').first().remove();
     }
   },
 

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

@@ -0,0 +1,14 @@
+// CKEditor plugin configuration
+
+function addQueryString( 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( "&" );
+}
+
+// load external plugins
+CKEDITOR.plugins.addExternal('MediaEmbed', '<%= asset_path('ckeditor-contrib/plugins/MediaEmbed/') %>');
+CKEDITOR.plugins.addExternal('richfile', '<%= asset_path('ckeditor-contrib/plugins/richfile/') %>');

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

@@ -0,0 +1,37 @@
+// Direct asset picker
+
+var rich = rich || {};
+rich.AssetPicker = function(){
+	
+};
+
+rich.AssetPicker.prototype = {
+	
+	showFinder: function(dom_id, options){
+		// open a popup
+		var params = {};
+		params.CKEditor = 'picker'; // this is not CKEditor
+		params.default_style = options.default_style;
+		params.allowed_styles = options.allowed_styles;
+		params.insert_many = options.insert_many;
+		params.type = options.type || "image";
+		params.viewMode = options.view_mode || "grid";
+		params.scoped = options.scoped || false;
+		if(params.scoped == true) {
+			params.scope_type = options.scope_type
+			params.scope_id = options.scope_id;
+		}
+		params.dom_id = dom_id;
+		var url = addQueryString(options.richBrowserUrl, params );
+		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});
+  }
+
+};
+
+// Rich Asset input
+var assetPicker = new rich.AssetPicker();

data/app/assets/stylesheets/rich/application.css.scss

@@ -87,16 +87,18 @@ header {
 	margin-left: 20px;
 }
 
-#insert-toggle {
+#insert-toggle, #view-toggle {
   float: right;
   height: $headerHeight;
   overflow: hidden;
-  margin: 0 $margin 0 5px;
-  padding-left: 25px;
-  background: image-url('rich/menu-dash.png') no-repeat left center;
+  margin: 0 $margin/2 0 0;
 }
 
-#insert-many, #insert-one {
+#view-toggle {
+  margin: 0 $margin 0 0;
+}
+
+#insert-many, #insert-one, #view-list, #view-grid {
   display: block;
   width: 16px;
   height: $headerHeight;
@@ -112,6 +114,15 @@ header {
   background-image: image-url('rich/insert-one.png');
 }
 
+#view-grid {
+  background-image: image-url('rich/view-grid.png');
+}
+
+#view-list {
+  background-image: image-url('rich/view-list.png');
+}
+
+// Default thumbnail view
 #items {
 	list-style: none;
 	margin: 0 0 0 $margin;
@@ -233,7 +244,66 @@ header {
 		background-position: 0 -32px;
 	}
 	
-	
+}   
+
+// Condensed list view
+#items.list {
+
+  li {
+    width: auto;
+    height: 32px;
+    float: none;
+    margin-bottom: 16px;
+
+    img, .placeholder {
+      height: 32px;
+      width: 32px;
+      float: left;
+      margin-right: 16px;
+      line-height: 32px;
+      border: none;
+    }
+
+    .spinner {
+      margin: 0;
+    }
+
+    .progress .progress-bar {
+      background: $light;
+      height: 4px;
+      float: left;
+      @include rounded;
+      margin-top: 28px;
+    }
+
+    
+    p {
+      color: $dark;
+      font-size: 14px;
+      width: auto;
+      height: 32px;
+      line-height: 32px;
+      float: left;
+      cursor: default;
+    }
+
+    .delete {
+        position: relative;
+        float: left;
+        text-indent: -9999px;
+        margin: 8px 0 0 0;
+        width:$margin;
+        height: $margin;
+        background: image-url('rich/x-red.png') no-repeat right ($margin / 2 - 5);
+        opacity: 0.1;
+    }
+
+    #uploadBlock:hover .placeholder .spinner {
+      background-position: 0 0px;
+    }
+
+  }
+
 }
 
 .clickable:hover {
@@ -244,8 +314,9 @@ header {
 ul.scopes {
 	
 	list-style: none;
-	margin: 0 0 0 ($margin/4*3);
-	padding: 0;
+	margin: 0 15px 0 ($margin/4*3);
+	padding: 0 10px 0 0;
+  background: image-url('rich/menu-dash.png') no-repeat right 23px;
 	float: right;
 	
 	li {