Ace version is 1.0.0
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.
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: '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"
The following lines will help you through the asset pre-compilation process on heroku.
# app/initializers/production.rb
# Precompile additional assets (application.js, application.css, and all non-JS/CSS are already added)
config.assets.precompile += %w(
ace/ace.js
ace/*
aced-rails.js
)
- Fork it
- Create your feature branch (
git checkout -b my-new-feature
) - Commit your changes (
git commit -am 'Added some feature'
) - Push to the branch (
git push origin my-new-feature
) - Create new Pull Request