Cloud9 Ace editor for Rails 3.1+
Switch branches/tags
Latest commit 3472a6b Mar 22, 2016
Failed to load latest commit information.
lib fix some bugs Mar 26, 2013
vendor/assets/javascripts Many changes for new version. Mar 7, 2013
.gitignore initial Apr 3, 2012
.travis.yml Add travis.yml Mar 7, 2013 fix some bugs Mar 26, 2013
Gemfile initial Apr 3, 2012
LICENSE initial Apr 3, 2012 Update Mar 22, 2016
Rakefile initial Apr 3, 2012
aced_rails.gemspec add rails 4 support May 23, 2014


I've no time and reasons to maintain this repo. I'm ready to transfer it to someone else. If you want to become a new maintainer please contact me via github issue or

AcedRails Gem Version endorse

Ace version is 1.0.0

Demo app and repo

This gem provide some generators and helpers for using Cloud9 Editor (ACE) in Rails applications.

I wrote a little jQuery plugin as part of this gem. Most important feature - is transform textarea into ace editor (hide textarea, place div instead and sync text). See below for more information.


Rails 3.2+ is required.

Add this line to your application's Gemfile:

gem 'aced_rails'

And then execute:

$ bundle

And generate config file:

$ rails g aced_rails:install


The config file allows you to change themes, modes, workers, and key-bindings. It is simple and well commented. Just read it.

The main feature - The Gem includes aced-rails.js and necessary ACE javascripts to the asset_pipe as they are setup in the config file.


I suppose you already have configured aced.

Aced provides a helper 'include_tag' that should be used instantly after your javascript_include_tag(commonly found in the application layout file):

  = stylesheet_link_tag "application"
  = javascript_include_tag "application"
  = aced_tag

The most important feature is jQuery plugin:

  • init example. Convert div to ACE editor with specified theme and mode
  $(target_div).acedInit({theme: 'github', mode: 'javascript'});
  • get ace editor object:
  editor = $(aced_div).aced();
  // or
  editor = $(aced_div).data('ace-editor');
  • get session
  session = $(aced_div).acedSession();
  // or
  session = $(aced_div).aced().getSession();
  • transform textarea to ace editor (hide textarea, create div and link it):
  $(textarea).acedInitTA({theme: 'github', mode: 'javascript'});

  // get linked div
  $(textarea).data('ace-div') //return jQuery object
  • without javasript:
  <div ace-editor ace-theme="github" ace-mode="javascript"/>

  <textarea ace-editor ace-theme="github" ace-mode="javascript">
  • with rails form_for helper:
  = form_for @article do |f|
      = f.label :title
      = f.text_field :title
      = f.label :body
      = f.text_area :body,{"ace-editor" => "", "ace-mode" => "text", "ace-theme" => "github", style: "height: 300px;"}
      = f.submit :save, class: "button"


  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