TextAreaMate is a simple javascript library on top of Prototype, that turns a textarea into a simple code editor with a TextMate feeling.

For now it’s working on FF & Safari, Mac only. As soon as I get it to work cross-browser I will put it on GitHub for further development.

Features

tab key support
command + / for commenting lines
command + [ for indenting less (one line or a block of code).
command + ] for indenting more (one line or a block of code).
Dependencies

Prototype JavaScipt Library

Install

Get the beta here and copy both files to the appropriate directory.

Usage

Include prototype.js and textareamate.js:

1
2

<script src="prototype.js" type="text/javascript" charset="utf-8"></script>
<script src="textareamate.js" type="text/javascript" charset="utf-8"></script>

For railers, something like:

<%= javascript_include_tag :defaults, 'textareamate' %>

Now you can start using it:

1
2

<textarea name="editor" id="editor" onkeydown="return TextAreaMate.onKeyPress(this,event)">
</textarea>

It plays well with rails:

<%= text_area :pastie, :body, :onkeydown => 'return TextAreaMate.onKeyPress(this,event)'  %>

Demo