Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Rich text editor for Active Admin using wysihtml5.
Ruby JavaScript

README.md

Active Admin Editor

Build Status Code Climate

This is a wysiwyg html editor for the Active Admin interface using wysihtml5.

screenshot

Demo

Installation

Add the following to your Gemfile:

gem 'active_admin_editor'

And include the wysiwyg styles in your application.css:

//= require active_admin/editor/wysiwyg

Then run the following to install the default intializer:

$ rails g active_admin:editor

Usage

This gem provides you with a custom formtastic input called :html_editor to build out a wysihtml5 enabled input. All you have to do is specify the :as option for your inputs.

Example

ActiveAdmin.register Page do
  form do |f|
    f.inputs do
      f.input :title
      f.input :content, as: :html_editor
    end

    f.buttons
  end
end

Uploads

The editor supports uploading of assets directly to an S3 bucket. Edit the initializer that was installed when you ran rails g active_admin:editor.

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 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>

Configuration

You can configure the editor in the initializer installed with rails g active_admin:editor or you can configure the editor during ActiveAdmin.setup:

ActiveAdmin.setup do |config|
  # ...
  config.editor.aws_access_key_id = '<your aws access key>'
  config.editor.s3_bucket = 'bucket'
end

Parser Rules

Parser rules can be configured through the initializer:

ActiveAdmin::Editor.configure do |config|
  config.parser_rules['tags']['strike'] = {
    'remove' => 0
  }
end

Be sure to clear your rails cache after changing the config:

rm -rf tmp/cache

Heroku

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 labs feature to your app.

  1. Tell your rails app to run initializers on asset compilation

    # config/environments/production.rb
    config.initialize_on_precompile = true
  2. Add the labs feature

    heroku labs:enable user-env-compile -a myapp

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

Run RSpec tests with bundle exec rake. Run JavaScript specs with bundle exec rake konacha:serve.

Something went wrong with that request. Please try again.