active_admin_editor 0.3.6 → 1.0.0

data/README.md

@@ -1,52 +1,35 @@
 # Active Admin Editor
 
-This is a wysiyg html editor for the [Active Admin](http://activeadmin.info/)
+[![Build Status](https://travis-ci.org/ejholmes/active_admin_editor.png)](https://travis-ci.org/ejholmes/active_admin_editor)
+
+This is a wysiwyg html editor for the [Active Admin](http://activeadmin.info/)
 interface using [wysihtml5](https://github.com/xing/wysihtml5).
 
-![screenshot](http://i.imgur.com/vfX1A.png)
+![screenshot](https://dl.dropbox.com/u/1906634/Captured/6V2rZ.png)
 
 ## Installation
 
-```ruby
-# Gemfile
+Add the following to your `Gemfile`:
 
+```ruby
 gem 'active_admin_editor'
 ```
 
-Then add the following stylesheet to your application manifest:
+And include the wysiwyg styles in your `application.css`:
 
-```ruby
-# app/assets/stylesheets/application.css
+```css
 //= require active_admin/editor/wysiwyg
 ```
 
-And the following to your active\_admin.css.scss and active\_admin.js:
-
-```ruby
-# app/assets/javascripts/active_admin.js
-//= require active_admin/editor
-```
-
-```ruby
-# app/assets/javascripts/active_admin.css.scss
-@import 'active_admin/editor';
-```
-
-Now install the migrations:
-
-```bash
-$ rake active_admin_editor:install:migrations
-$ rake db:migrate
-```
-
-And finally install the wysiwyg css file:
+Then run the following to install the default intializer:
 
 ```bash
 $ rails g active_admin:editor
 ```
 
 ## Usage
-This gem provides you with a custom formtastic input called `:html_editor` to build out an html editor.
+
+This gem provides you with a custom formtastic input called `:html_editor` to build out an wysihtml5 enabled input.
 All you have to do is specify the `:as` option for your inputs.
 
 **Example**
@@ -63,3 +46,48 @@ ActiveAdmin.register Page do
   end
 end
 ```
+
+## Image Uploads
+
+The editor supports uploading of images direct to s3. Add the following to an
+initializer:
+
+```ruby
+ActiveAdmin::Editor.configure do |config|
+  config.s3_bucket = '<your bucket>'
+  config.aws_access_key_id = '<your aws access key>'
+  config.aws_access_secret = '<your aws secret>'
+  # config.storage_dir = 'uploads'
+end
+```
+
+Then add the following CORS configuration to the S3 bucket:
+
+```xml
+<?xml version="1.0" encoding="UTF-8"?>
+<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
+    <CORSRule>
+        <AllowedOrigin>*</AllowedOrigin>
+        <AllowedMethod>PUT</AllowedMethod>
+        <AllowedMethod>POST</AllowedMethod>
+        <AllowedMethod>GET</AllowedMethod>
+        <AllowedMethod>HEAD</AllowedMethod>
+        <MaxAgeSeconds>3000</MaxAgeSeconds>
+        <ExposeHeader>Location</ExposeHeader>
+        <AllowedHeader>*</AllowedHeader>
+    </CORSRule>
+</CORSConfiguration>
+```
+
+## Contributing
+
+1. Fork it
+2. Create your feature branch (`git checkout -b my-new-feature`)
+3. Commit your changes (`git commit -am 'Added some feature'`)
+4. Push to the branch (`git push origin my-new-feature`)
+5. Create new Pull Request
+
+### Tests
+
+Runy RSpec tests with `bundle exec rake`. Run JavaScript specs with `bundle
+exec rake konacha:serve`.

data/Rakefile

@@ -12,27 +12,18 @@ rescue LoadError
   RDoc::Task = Rake::RDocTask
 end
 
-RDoc::Task.new(:rdoc) do |rdoc|
-  rdoc.rdoc_dir = 'rdoc'
-  rdoc.title    = 'ActiveAdminEditor'
-  rdoc.options << '--line-numbers'
-  rdoc.rdoc_files.include('README.rdoc')
-  rdoc.rdoc_files.include('lib/**/*.rb')
-end
-
-
-
-
 Bundler::GemHelper.install_tasks
 
-require 'rake/testtask'
+APP_RAKEFILE = File.expand_path('../spec/dummy/Rakefile', __FILE__)
+load 'rails/tasks/engine.rake'
 
-Rake::TestTask.new(:test) do |t|
-  t.libs << 'lib'
-  t.libs << 'test'
-  t.pattern = 'test/**/*_test.rb'
-  t.verbose = false
-end
+Dir[File.join(File.dirname(__FILE__), 'tasks/**/*.rake')].each {|f| load f }
+require 'rspec/core'
+require 'rspec/core/rake_task'
 
+desc 'Run all specs in spec directory (excluding plugin specs)'
+RSpec::Core::RakeTask.new(:spec => 'app:db:test:prepare')
 
-task :default => :test
+task :default => :spec
+task 'konacha:serve' => 'app:konacha:serve'
+task 'konacha:run' => 'app:konacha:run'

data/app/assets/javascripts/active_admin/editor.js

@@ -1,6 +1,14 @@
-//= require active_admin/editor/wysihtml5.min
-//= require active_admin/editor/wysihtml5/parser_rules
-//= require active_admin/editor/fileuploader
-//= require active_admin/editor/jquery.paginate.min
-//= require active_admin/editor/core
-//= require active_admin/editor/quicksave
+//= require wysihtml5
+//= require active_admin/editor/editor
+//= require active_admin/editor/config
+//= require active_admin/editor/parser_rules
+
+(function(window, document, $) {
+  window.AA.editors = []
+
+  $(function() {
+    $('.html_editor').each(function() {
+      window.AA.editors.push(new Editor(this, window.AA.editor))
+    })
+  })
+})(window, document, jQuery)

data/app/assets/javascripts/active_admin/editor/config.js.erb

@@ -0,0 +1,12 @@
+(function(window, document) {
+  window.AA = (window.AA || {})
+  window.AA.editor = (window.AA.editor || {})
+
+  <% %w(aws_access_key_id aws_access_secret s3_bucket storage_dir).each do |option| %>
+  window.AA.editor.<%= option %> = '<%= ActiveAdmin::Editor.configuration.send(option.to_sym) %>'
+  <% end %>
+
+  window.AA.editor.stylesheets = '<%= asset_path 'active_admin/editor/wysiwyg.css' %>'
+  window.AA.editor.spinner = '<%= asset_path 'active_admin/editor/loader.gif' %>'
+  window.AA.editor.uploads_enabled = <%= ActiveAdmin::Editor.configuration.s3_configured? %>
+})(window, document)

data/app/assets/javascripts/active_admin/editor/editor.js

@@ -0,0 +1,101 @@
+//= require_tree ./templates
+
+(function(window, document, wysihtml5) {
+  var config = null
+
+  var Editor = function(el, _config) {
+    config          = _config
+    var _this       = this
+    this.$el        = $(el)
+    this.$textarea  = this.$el.find('textarea')
+    this.policy     = this.$el.data('policy')
+
+    this.addToolbar()
+    this.attachEditor()
+  }
+
+  Editor.prototype.addToolbar = function() {
+    var template = JST['active_admin/editor/templates/toolbar']({
+      id: this.$el.attr('id') + '-toolbar'
+    })
+
+    this.$toolbar = $(template)
+
+    if (config.uploads_enabled) {
+      var _this = this
+      this.$toolbar.find('input.uploadable').each(function() {
+        _this.addUploader(this)
+      })
+    }
+
+    this.$el.find('.wrap').prepend(this.$toolbar)
+  }
+
+  Editor.prototype.addUploader = function(input) {
+    var $input = $(input)
+
+    var template = JST['active_admin/editor/templates/uploader']({ spinner: config.spinner })
+    var $uploader = $(template)
+
+    var $dialog = $input.closest('[data-wysihtml5-dialog]')
+    $dialog.append($uploader)
+
+    var _this = this
+    $uploader.find('input:file').on('change', function() {
+      $input.val('')
+      _this.upload(this.files[0], function(location) {
+        $input.val(location)
+      })
+    })
+  }
+
+  Editor.prototype.attachEditor = function() {
+    this.editor = new wysihtml5.Editor(this.$textarea.attr('id'), {
+      toolbar: this.$toolbar.attr('id'),
+      stylesheets: config.stylesheets,
+      parserRules: config.parserRules
+    })
+  }
+
+  Editor.prototype.uploading = function(uploading) {
+    this._uploading = uploading
+    this.$el.toggleClass('uploading', this._uploading)
+    return this._uploading
+  }
+
+  Editor.prototype.upload = function(file, callback) {
+    var _this = this
+    _this.uploading(true)
+
+    var xhr = new XMLHttpRequest()
+      , fd = new FormData()
+      , key = config.storage_dir + '/' + Date.now().toString() + '-' + file.name
+
+    fd.append('key', key)
+    fd.append('AWSAccessKeyId', config.aws_access_key_id)
+    fd.append('acl', 'public-read')
+    fd.append('policy', this.policy.document)
+    fd.append('signature', this.policy.signature)
+    fd.append('Content-Type', file.type)
+    fd.append('file', file)
+
+    xhr.upload.addEventListener('progress', function(e) {
+      _this.loaded   = e.loaded
+      _this.total    = e.total
+      _this.progress = e.loaded / e.total
+    }, false)
+
+    xhr.onreadystatechange = function() {
+      if (xhr.readyState != 4) { return }
+      _this.uploading(false)
+      callback(xhr.getResponseHeader('Location'))
+    }
+
+    xhr.open('POST', 'https://' + config.s3_bucket + '.s3.amazonaws.com', true)
+    xhr.send(fd)
+
+    return xhr
+  }
+
+  window.Editor = Editor
+})(window, document, wysihtml5)

data/app/assets/javascripts/active_admin/editor/parser_rules.js

@@ -0,0 +1,561 @@
+/**
+ * Full HTML5 compatibility rule set
+ * These rules define which tags and CSS classes are supported and which tags should be specially treated.
+ *
+ * Examples based on this rule set:
+ *
+ *    <a href="http://foobar.com">foo</a>
+ *    ... becomes ...
+ *    <a href="http://foobar.com" target="_blank" rel="nofollow">foo</a>
+ *
+ *    <img align="left" src="http://foobar.com/image.png">
+ *    ... becomes ...
+ *    <img class="wysiwyg-float-left" src="http://foobar.com/image.png" alt="">
+ *
+ *    <div>foo<script>alert(document.cookie)</script></div>
+ *    ... becomes ...
+ *    <div>foo</div>
+ *
+ *    <marquee>foo</marquee>
+ *    ... becomes ...
+ *    <span>foo</span>
+ *
+ *    foo <br clear="both"> bar
+ *    ... becomes ...
+ *    foo <br class="wysiwyg-clear-both"> bar
+ *
+ *    <div>hello <iframe src="http://google.com"></iframe></div>
+ *    ... becomes ...
+ *    <div>hello </div>
+ *
+ *    <center>hello</center>
+ *    ... becomes ...
+ *    <div class="wysiwyg-text-align-center">hello</div>
+ */
+
+(function(window, document) {
+  window.AA = (window.AA || {})
+  window.AA.editor = (window.AA.editor || {})
+
+  var parserRules = {
+      /**
+       * CSS Class white-list
+       * Following CSS classes won't be removed when parsed by the wysihtml5 HTML parser
+       */
+      "classes": {
+          "wysiwyg-clear-both": 1,
+          "wysiwyg-clear-left": 1,
+          "wysiwyg-clear-right": 1,
+          "wysiwyg-color-aqua": 1,
+          "wysiwyg-color-black": 1,
+          "wysiwyg-color-blue": 1,
+          "wysiwyg-color-fuchsia": 1,
+          "wysiwyg-color-gray": 1,
+          "wysiwyg-color-green": 1,
+          "wysiwyg-color-lime": 1,
+          "wysiwyg-color-maroon": 1,
+          "wysiwyg-color-navy": 1,
+          "wysiwyg-color-olive": 1,
+          "wysiwyg-color-purple": 1,
+          "wysiwyg-color-red": 1,
+          "wysiwyg-color-silver": 1,
+          "wysiwyg-color-teal": 1,
+          "wysiwyg-color-white": 1,
+          "wysiwyg-color-yellow": 1,
+          "wysiwyg-float-left": 1,
+          "wysiwyg-float-right": 1,
+          "wysiwyg-font-size-large": 1,
+          "wysiwyg-font-size-larger": 1,
+          "wysiwyg-font-size-medium": 1,
+          "wysiwyg-font-size-small": 1,
+          "wysiwyg-font-size-smaller": 1,
+          "wysiwyg-font-size-x-large": 1,
+          "wysiwyg-font-size-x-small": 1,
+          "wysiwyg-font-size-xx-large": 1,
+          "wysiwyg-font-size-xx-small": 1,
+          "wysiwyg-text-align-center": 1,
+          "wysiwyg-text-align-justify": 1,
+          "wysiwyg-text-align-left": 1,
+          "wysiwyg-text-align-right": 1
+      },
+      /**
+       * Tag list
+       *
+       * The following options are available:
+       *
+       *    - add_class:        converts and deletes the given HTML4 attribute (align, clear, ...) via the given method to a css class
+       *                        The following methods are implemented in wysihtml5.dom.parse:
+       *                          - align_text:  converts align attribute values (right/left/center/justify) to their corresponding css class "wysiwyg-text-align-*")
+       *                            <p align="center">foo</p> ... becomes ... <p> class="wysiwyg-text-align-center">foo</p>
+       *                          - clear_br:    converts clear attribute values left/right/all/both to their corresponding css class "wysiwyg-clear-*"
+       *                            <br clear="all"> ... becomes ... <br class="wysiwyg-clear-both">
+       *                          - align_img:    converts align attribute values (right/left) on <img> to their corresponding css class "wysiwyg-float-*"
+       *                          
+       *    - remove:             removes the element and its content
+       *
+       *    - rename_tag:         renames the element to the given tag
+       *
+       *    - set_class:          adds the given class to the element (note: make sure that the class is in the "classes" white list above)
+       *
+       *    - set_attributes:     sets/overrides the given attributes
+       *
+       *    - check_attributes:   checks the given HTML attribute via the given method
+       *                            - url:            allows only valid urls (starting with http:// or https://)
+       *                            - src:            allows something like "/foobar.jpg", "http://google.com", ...
+       *                            - href:           allows something like "mailto:bert@foo.com", "http://google.com", "/foobar.jpg"
+       *                            - alt:            strips unwanted characters. if the attribute is not set, then it gets set (to ensure valid and compatible HTML)
+       *                            - numbers:  ensures that the attribute only contains numeric characters
+       */
+      "tags": {
+          "tr": {
+              "add_class": {
+                  "align": "align_text"
+              }
+          },
+          "strike": {
+              "remove": 1
+          },
+          "form": {
+              "rename_tag": "div"
+          },
+          "rt": {
+              "rename_tag": "span"
+          },
+          "code": {},
+          "acronym": {
+              "rename_tag": "span"
+          },
+          "br": {
+              "add_class": {
+                  "clear": "clear_br"
+              }
+          },
+          "details": {
+              "rename_tag": "div"
+          },
+          "h4": {
+              "add_class": {
+                  "align": "align_text"
+              }
+          },
+          "em": {},
+          "title": {
+              "remove": 1
+          },
+          "multicol": {
+              "rename_tag": "div"
+          },
+          "figure": {
+              "rename_tag": "div"
+          },
+          "xmp": {
+              "rename_tag": "span"
+          },
+          "small": {
+              "rename_tag": "span",
+              "set_class": "wysiwyg-font-size-smaller"
+          },
+          "area": {
+              "remove": 1
+          },
+          "time": {
+              "rename_tag": "span"
+          },
+          "dir": {
+              "rename_tag": "ul"
+          },
+          "bdi": {
+              "rename_tag": "span"
+          },
+          "command": {
+              "remove": 1
+          },
+          "ul": {},
+          "progress": {
+              "rename_tag": "span"
+          },
+          "dfn": {
+              "rename_tag": "span"
+          },
+          "iframe": {
+              "remove": 1
+          },
+          "figcaption": {
+              "rename_tag": "div"
+          },
+          "a": {
+              "check_attributes": {
+                  "href": "url" // if you compiled master manually then change this from 'url' to 'href'
+              },
+              "set_attributes": {
+                  "rel": "nofollow",
+                  "target": "_blank"
+              }
+          },
+          "img": {
+              "check_attributes": {
+                  "width": "numbers",
+                  "alt": "alt",
+                  "src": "url", // if you compiled master manually then change this from 'url' to 'src'
+                  "height": "numbers"
+              },
+              "add_class": {
+                  "align": "align_img"
+              }
+          },
+          "rb": {
+              "rename_tag": "span"
+          },
+          "footer": {
+              "rename_tag": "div"
+          },
+          "noframes": {
+              "remove": 1
+          },
+          "abbr": {
+              "rename_tag": "span"
+          },
+          "u": {},
+          "bgsound": {
+              "remove": 1
+          },
+          "sup": {
+              "rename_tag": "span"
+          },
+          "address": {
+              "rename_tag": "div"
+          },
+          "basefont": {
+              "remove": 1
+          },
+          "nav": {
+              "rename_tag": "div"
+          },
+          "h1": {
+              "add_class": {
+                  "align": "align_text"
+              }
+          },
+          "head": {
+              "remove": 1
+          },
+          "tbody": {
+              "add_class": {
+                  "align": "align_text"
+              }
+          },
+          "dd": {
+              "rename_tag": "div"
+          },
+          "s": {
+              "rename_tag": "span"
+          },
+          "li": {},
+          "td": {
+              "check_attributes": {
+                  "rowspan": "numbers",
+                  "colspan": "numbers"
+              },
+              "add_class": {
+                  "align": "align_text"
+              }
+          },
+          "object": {
+              "remove": 1
+          },
+          "div": {
+              "add_class": {
+                  "align": "align_text"
+              }
+          },
+          "option": {
+              "rename_tag": "span"
+          },
+          "select": {
+              "rename_tag": "span"
+          },
+          "i": {},
+          "track": {
+              "remove": 1
+          },
+          "wbr": {
+              "remove": 1
+          },
+          "fieldset": {
+              "rename_tag": "div"
+          },
+          "big": {
+              "rename_tag": "span",
+              "set_class": "wysiwyg-font-size-larger"
+          },
+          "button": {
+              "rename_tag": "span"
+          },
+          "noscript": {
+              "remove": 1
+          },
+          "svg": {
+              "remove": 1
+          },
+          "input": {
+              "remove": 1
+          },
+          "table": {},
+          "keygen": {
+              "remove": 1
+          },
+          "h5": {
+              "add_class": {
+                  "align": "align_text"
+              }
+          },
+          "meta": {
+              "remove": 1
+          },
+          "map": {
+              "rename_tag": "div"
+          },
+          "isindex": {
+              "remove": 1
+          },
+          "mark": {
+              "rename_tag": "span"
+          },
+          "caption": {
+              "add_class": {
+                  "align": "align_text"
+              }
+          },
+          "tfoot": {
+              "add_class": {
+                  "align": "align_text"
+              }
+          },
+          "base": {
+              "remove": 1
+          },
+          "video": {
+              "remove": 1
+          },
+          "strong": {},
+          "canvas": {
+              "remove": 1
+          },
+          "output": {
+              "rename_tag": "span"
+          },
+          "marquee": {
+              "rename_tag": "span"
+          },
+          "b": {},
+          "q": {
+              "check_attributes": {
+                  "cite": "url"
+              }
+          },
+          "applet": {
+              "remove": 1
+          },
+          "span": {},
+          "rp": {
+              "rename_tag": "span"
+          },
+          "spacer": {
+              "remove": 1
+          },
+          "source": {
+              "remove": 1
+          },
+          "aside": {
+              "rename_tag": "div"
+          },
+          "frame": {
+              "remove": 1
+          },
+          "section": {
+              "rename_tag": "div"
+          },
+          "body": {
+              "rename_tag": "div"
+          },
+          "ol": {},
+          "nobr": {
+              "rename_tag": "span"
+          },
+          "html": {
+              "rename_tag": "div"
+          },
+          "summary": {
+              "rename_tag": "span"
+          },
+          "var": {
+              "rename_tag": "span"
+          },
+          "del": {
+              "remove": 1
+          },
+          "blockquote": {
+              "check_attributes": {
+                  "cite": "url"
+              }
+          },
+          "style": {
+              "remove": 1
+          },
+          "device": {
+              "remove": 1
+          },
+          "meter": {
+              "rename_tag": "span"
+          },
+          "h3": {
+              "add_class": {
+                  "align": "align_text"
+              }
+          },
+          "textarea": {
+              "rename_tag": "span"
+          },
+          "embed": {
+              "remove": 1
+          },
+          "hgroup": {
+              "rename_tag": "div"
+          },
+          "font": {
+              "rename_tag": "span",
+              "add_class": {
+                  "size": "size_font"
+              }
+          },
+          "tt": {
+              "rename_tag": "span"
+          },
+          "noembed": {
+              "remove": 1
+          },
+          "thead": {
+              "add_class": {
+                  "align": "align_text"
+              }
+          },
+          "blink": {
+              "rename_tag": "span"
+          },
+          "plaintext": {
+              "rename_tag": "span"
+          },
+          "xml": {
+              "remove": 1
+          },
+          "h6": {
+              "add_class": {
+                  "align": "align_text"
+              }
+          },
+          "param": {
+              "remove": 1
+          },
+          "th": {
+              "check_attributes": {
+                  "rowspan": "numbers",
+                  "colspan": "numbers"
+              },
+              "add_class": {
+                  "align": "align_text"
+              }
+          },
+          "legend": {
+              "rename_tag": "span"
+          },
+          "hr": {},
+          "label": {
+              "rename_tag": "span"
+          },
+          "dl": {
+              "rename_tag": "div"
+          },
+          "kbd": {
+              "rename_tag": "span"
+          },
+          "listing": {
+              "rename_tag": "div"
+          },
+          "dt": {
+              "rename_tag": "span"
+          },
+          "nextid": {
+              "remove": 1
+          },
+          "pre": {},
+          "center": {
+              "rename_tag": "div",
+              "set_class": "wysiwyg-text-align-center"
+          },
+          "audio": {
+              "remove": 1
+          },
+          "datalist": {
+              "rename_tag": "span"
+          },
+          "samp": {
+              "rename_tag": "span"
+          },
+          "col": {
+              "remove": 1
+          },
+          "article": {
+              "rename_tag": "div"
+          },
+          "cite": {},
+          "link": {
+              "remove": 1
+          },
+          "script": {
+              "remove": 1
+          },
+          "bdo": {
+              "rename_tag": "span"
+          },
+          "menu": {
+              "rename_tag": "ul"
+          },
+          "colgroup": {
+              "remove": 1
+          },
+          "ruby": {
+              "rename_tag": "span"
+          },
+          "h2": {
+              "add_class": {
+                  "align": "align_text"
+              }
+          },
+          "ins": {
+              "rename_tag": "span"
+          },
+          "p": {
+              "add_class": {
+                  "align": "align_text"
+              }
+          },
+          "sub": {
+              "rename_tag": "span"
+          },
+          "comment": {
+              "remove": 1
+          },
+          "frameset": {
+              "remove": 1
+          },
+          "optgroup": {
+              "rename_tag": "span"
+          },
+          "header": {
+              "rename_tag": "div"
+          }
+      }
+  };
+
+  window.AA.editor.parserRules = parserRules
+})(window, document)