Simple Form Wysihtml

Integrates Wysihtml5 editor (resp. this branch of it) with Rails and Simple Form.

Add the gem to your Gemfile:

gem 'simple_form_wysihtml'

And execute:

$ bundle

Or install it yourself as:

$ gem install simple_form_wysihtml

To make it work you need to require the javascripts in application.js:

//= require simple_form_wysihtml

Optionally you can add the (very minimal) default styling in application.css:

*= require simple_form_wysihtml

Use in forms:

= form.input :body, as: :wysihtml

See simple_form_wysihtml.css.scss for how to style the editor.

You can override the defaults by specifying the toolbar in an initializer:

# config/initializers/simple_form_wysihtml.rb

SimpleFormWysihtml::WysihtmlInput.configure do |c|
  c.commands = [
    { bold: { label: 'Bold' }, italic: { label: 'Italic' } },
    { createLink:  { label: 'Create Link' } },
    { insertOrderedList: nil, insertUnorderedList: nil }
  ]
end

Alternatively, you can configure individual input fields in the form:

= f.input :body, as: :wysihtml, commands: [{ bold: { label: 'B' } }, { italic: { label: 'I' } }]

See the list of available commands.

The parser rules are defined as a javascript variable, containing a hash of rules (see Wysihtml5x.

Add a javascript file with your own parser rules (namespaced for example like this):

// app/assets/javascripts/parser_rules.js

YourCoolNameSpace = (function(){

  var YourCoolNameSpace = {
    parserRules: {
      tags: {
        i: {
          rename_tag: 'em'
        },

        a: {
          set_attributes: {
            target: "_self"
          }
        }
      }
    }
  }

  return YourCoolNameSpace;
})();

Then in your initializer assign the parser_rules to the name of your JS variable:

# config/initializers/simple_form_wysihtml.rb

SimpleFormWysihtml::WysihtmlInput.configure do |c|
  c.parser_rules = 'YourCoolNameSpace.parserRules'
end

• addTableCells
• bgColorStyle
• removeLink
• createTable
• deleteTableCells
• fontSizeStyle
• foreColorStyle
• justifyFull
• mergeTableCells

Reference: wysihtml5 wiki.

How to do it?

1. Fork it ( https://github.com/tomasc/simple_form_wysihtml/fork )
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Add some feature')
4. Push to the branch (git push origin my-new-feature)
5. Create a new Pull Request