Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Cloud9 Ace editor for Rails 3.1+

branch: master
README.md

AcedRails Gem Version endorse

Ace version is 1.0.0

Demo app and repo

This gem provide some generators and helpers for using Ajax.org 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.

Installation

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

Configuration

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.

Usage

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: 'gihub', 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">
    alert('Hi!');
  </textarea>
  • with rails form_for helper:
  = form_for @article do |f|
    .field
      = f.label :title
      = f.text_field :title
    .field
      = f.label :body
      = f.text_area :body,{"ace-editor" => "", "ace-mode" => "text", "ace-theme" => "github", style: "height: 300px;"}
    .actions
      = f.submit :save, class: "button"

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
Something went wrong with that request. Please try again.