Giter Site home page Giter Site logo

aced_rails's Introduction

Abadoned!

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 [email protected]

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: '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">
    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

aced_rails's People

Contributors

blairanderson avatar ffloyd avatar nike-17 avatar tatums avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

aced_rails's Issues

Rails 4.0 or 4.1

Should this work in Rails 4.0 or 4.1?

I'm having an issue on 4.0.2

Bundler could not find compatible versions for gem "rails":
  In Gemfile:
    aced_rails (>= 0) ruby depends on
      rails (~> 3.1) ruby

    rails (4.0.2)

Assets will not precompile using aced_tag

All javascripts need to be added to production.rb.

ie: config.assets.precompile += ['ace/ace.js', 'aced-rails.js', 'ace/theme-textmate.js' etc...]

This is very inconvenient.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.