Wysihtml 5.0

README.md

@@ -2,9 +2,7 @@
 [![Build Status](https://travis-ci.org/ejholmes/active_admin_editor.png?branch=master)](https://travis-ci.org/ejholmes/active_admin_editor) [![Code Climate](https://codeclimate.com/github/ejholmes/active_admin_editor.png)](https://codeclimate.com/github/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](https://dl.dropbox.com/u/1906634/Captured/OhvTv.png)
+interface using [wysihtml](https://github.com/Voog/wysihtml).
 
 [Demo](http://active-admin-editor-demo.herokuapp.com/admin/pages/new)
 
@@ -36,6 +34,8 @@ All you have to do is specify the `:as` option for your inputs.
 **Example**
 
 ```ruby
+# app/admin/page.rb
+
 ActiveAdmin.register Page do
   form do |f|
     f.inputs do
@@ -54,6 +54,8 @@ The editor supports uploading of assets directly to an S3 bucket. Edit the initi
 was installed when you ran `rails g active_admin:editor`.
 
 ```ruby
+# config/initializers/active_admin_editor.rb
+
 ActiveAdmin::Editor.configure do |config|
   config.s3_bucket = '<your bucket>'
   config.aws_access_key_id = '<your aws access key>'
@@ -62,7 +64,7 @@ ActiveAdmin::Editor.configure do |config|
 end
 ```
 
-Then add the following CORS configuration to the S3 bucket:
+Then add the following CORS configuration to the S3 bucket (`Properties > Permissions > Edit CORS Configuration`):
 
 ```xml
 <?xml version="1.0" encoding="UTF-8"?>
@@ -96,10 +98,11 @@ end
 
 ## Parser Rules
 
-[Parser rules](https://github.com/xing/wysihtml5/tree/master/parser_rules) can
+[Parser rules](https://github.com/Voog/wysihtml/blob/master/parser_rules/advanced.js) can
 be configured through the initializer:
 
 ```ruby
+# config/initializers/active_admin_editor.rb
 ActiveAdmin::Editor.configure do |config|
   config.parser_rules['tags']['strike'] = {
     'remove' => 0
@@ -113,9 +116,27 @@ Be sure to clear your rails cache after changing the config:
 rm -rf tmp/cache
 ```
 
+## Line Breaks
+
+While in the editor, you can toggle between the default `Return` key action: `<p>` tags (`false`) and `<br>` tags (`true`):
+
+```ruby
+# config/initializers/active_admin_editor.rb
+
+ActiveAdmin::Editor.configure do |config|
+  config.use_line_breaks = false # default
+end
+```
+
+If `false`, or not set, then `Return` will generate a new `<p>` tag, and `Shift + Return` will
+generate a `<br>` tag (similar to many WYSIWYG editors). If `true`, then `Return` will always
+generate a `<br>` tag.
+
+_Note: this is the opposite default setting from [wysihtml](https://github.com/Voog/wysihtml). The reason is that while the [`useLineBreaks`](https://github.com/xing/wysihtml5/commit/9e88e5808704c93f77f8cf0123fca67dbb138e90) feature was a more recent add on the project, and expected behavior shouldn’t have changed, for this application (and personal preference) the added functionality of `<p>` + `<br>` seemed to be preferable over `<br>` only._
+
 ## Heroku
 
-Since some of the javascript files need to be compiled with access to the env
+Since some of the JavaScript files need to be compiled with access to the env
 vars, it's recommended that you add the [user-env-compile](https://devcenter.heroku.com/articles/labs-user-env-compile)
 labs feature to your app.
 

app/assets/javascripts/active_admin/editor.js

@@ -1,4 +1,5 @@
-//= require wysihtml5
+//= require wysihtml
+//= require wysihtml-toolbar
 //= require active_admin/editor/config
 //= require active_admin/editor/editor
 

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

@@ -10,4 +10,5 @@
   config.spinner = '<%= asset_path 'active_admin/editor/loader.gif' %>'
   config.uploads_enabled = <%= ActiveAdmin::Editor.configuration.s3_configured? %>
   config.parserRules = <%= ActiveAdmin::Editor.configuration.parser_rules.to_json %>
+  config.useLineBreaks = <%= !!ActiveAdmin::Editor.configuration.use_line_breaks %>
 })(window)

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

@@ -47,7 +47,7 @@
    * Adds a file input attached to the supplied text input. And upload is
    * triggered if the source of the input is changed.
    *
-   * @input Text input to attach a file input to. 
+   * @input Text input to attach a file input to.
    */
   Editor.prototype._addUploader = function(input) {
     var $input = $(input)
@@ -77,7 +77,8 @@
     this._editor = new wysihtml5.Editor(this.$textarea.attr('id'), {
       toolbar: this.$toolbar.attr('id'),
       stylesheets: config.stylesheets,
-      parserRules: config.parserRules
+      parserRules: config.parserRules,
+      useLineBreaks: config.useLineBreaks
     })
   }
 

lib/active_admin/editor/config.rb

@@ -29,6 +29,9 @@ class Configuration
       # wysiwyg stylesheets that get included in the backend and the frontend.
       attr_accessor :stylesheets
 
+      # Allows access to Editor.config.useLineBreaks switch
+      attr_accessor :use_line_breaks
+
       def storage_dir
         @storage_dir ||= 'uploads'
       end
@@ -50,6 +53,10 @@ def s3_configured?
       def parser_rules
         @parser_rules ||= PARSER_RULES.dup
       end
+
+      def use_line_breaks
+        @use_line_breaks ||= false
+      end
     end
   end
 end

lib/active_admin/editor/parser_rules.rb

@@ -78,13 +78,20 @@ module Editor
       #    - 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>
+      #                            <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-*"
-      #                          
+      #
+      #    - add_style:        converts and deletes the given HTML4 attribute (align) via the given method to a css style
+      #                        The following methods are implemented in wysihtml5.dom.parse:
+      #                          - align_text:  converts align attribute values (right/left/center) to their corresponding css style)
+      #                            <p align="center">foo</p> ... becomes ... <p style="text-align:center">foo</p>
+      #
       #    - remove:             removes the element and its content
       #
+      #    - unwrap              removes element but leaves 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)
@@ -96,7 +103,9 @@ module Editor
       #                            - 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
+      #                            - numbers:        ensures that the attribute only contains numeric (integer) characters (no float values or units)
+      #                            - dimension:      for with/height attributes where floating point numbrs and percentages are allowed
+      #                            - any:            allows anything to pass
       'tags' => {
         'tr' => {
           'add_class' => {
@@ -176,18 +185,19 @@ module Editor
         },
         'a' => {
           'check_attributes' => {
+            'target' => 'any',
             'href' => 'url' # if you compiled master manually then change this from 'url' to 'href'
           },
           'set_attributes' => {
-            'target' => '_blank'
+            'rel' => 'nofollow'
           }
         },
         'img' => {
           'check_attributes' => {
-            'width' => 'numbers',
+            'width' => 'dimension',
             'alt' => 'alt',
             'src' => 'url', # if you compiled master manually then change this from 'url' to 'src'
-            'height' => 'numbers'
+            'height' => 'dimension'
           },
           'add_class' => {
             'align' => 'align_img'
@@ -209,9 +219,6 @@ module Editor
         'bgsound' => {
           'remove' => 1
         },
-        'sup' => {
-          'rename_tag' => 'span'
-        },
         'address' => {
           'rename_tag' => 'div'
         },
@@ -529,9 +536,7 @@ module Editor
             'align' => 'align_text'
           }
         },
-        'sub' => {
-          'rename_tag' => 'span'
-        },
+        'sub' => {},
         'comment' => {
           'remove' => 1
         },
@@ -543,7 +548,8 @@ module Editor
         },
         'header' => {
           'rename_tag' => 'div'
-        }
+        },
+        'sup' => {}
       }
     }
   end