SimpleAceInput¶ ↑

A drop in solution for turning any textarea into an ACE editor via simple_form.

Install¶ ↑

Put this line in your Gemfile:

gem 'simple_ace_input'

Then bundle:

% bundle

The primary configuration consideration relates to how you want to handle loading the javascript files, as it relates to the Asset Pipeline.

For the whole kit and kaboodle add the following to your application.js:

//= require simple_ace_input

For a minimally viable setup (no modes or themes) add the following to your application.js:

//= ace/ace
//= simple_ace_input/controller

Then add only the modes and themes you want:

//= ace/mode-css
//= ace/mode-solarized-dark

Another option and one worth considering (b/c ACE is quite large) is only loading the scripts on pages where ACE is actually needed.

If you take this route make sure the scripts you use get precompiled by adding something like the following to your production.rb file:

config.assets.precompile += ['ace/*.js', 'simple_ace_input']

If you only want to precompile the mode, theme and keybinding files you can use a proc like this:

config.assets.precompile += [Proc.new{ |path| File.basename(path, '.js' ) =~ /^(keybinding-|mode-|theme-)\w+$/ }]

Lastly, if you’re implementing this in an engine, you can designate the assets to be precompiled via an initializer placed in the engine.rb file:

initializer :assets, group: :all do |app|
  app.config.assets.precompile += [...]
end

Just designate a textarea input as: :ace.

<%= simple_form_for @user do |f| %>
  <%= f.input :code, as::ace %>
<% end %>

Set the mode, theme, and height by passing them as data- attributes.

data: { ace_mode: 'html', ace_theme: 'carto_light', ace_height: '600' }

If you would like to change the defaults, run the following to generate an initializer where you can set your own defaults.

% rails g simple_ace_input:config

I have not included any of the worker functionality in this gem because I have found it to be a bit finicky and more trouble than it’s worth.