jQuery-ace

jQuery plugin for ACE Code Editor latest version: 1.0.3

Download this project as a .zip file Download this project as a tar.gz file

What is jQuery-ace?

It's a jQuery plugin which allows to embed ACE Code Editor into any chosen div or textarea

How to install and use

First you need to include jQuery and Ace libraries. I provide it's bundles in archive in case that you haven't them. Then just include plugin source script:

<script src="jquery/jquery-1.8.3.min.js"></script>
<script src="ace/ace.js"></script>
<script src="ace/theme-twilight.js"></script>
<script src="ace/mode-ruby.js"></script>
<script src="jquery-ace.min.js"></script>

After that apply plugin to the existing textarea:

<textarea class="my-code-area" rows="4" style="width: 100%">puts 'foo'</textarea>
<script>
  $('.my-code-area').ace({ theme: 'twilight', lang: 'ruby' })
</script>

And ACE Code Edtior will be embeded immediately:

puts 'foo'

Rails integration

If you are using Rails then you could just add jquery-ace-rails gem to Gemfile:

  gem 'jquery-ace-rails'

And include scripts using sprockets in your application.js:

  //= require jquery/jquery-1.8.3.min
  //= require ace/ace
  //= require ace/theme-twilight
  //= require ace/mode-ruby
  //= require jquery-ace.min

Access to ACE Code Editor instance

Plugin stores instance of the ACE Code Editor to the elements data. You can access to it through ace data key.

  // Decorator
  var decorator = $('.my-code-area').data('ace');

  // ACE Code Editor instance
  var aceInstance = decorator.ace;

Authors and Contributors

Ivan Garmatenko (@cheef)