← Back to home

TextAreaMate turns your textarea's into simple code editors

August 25, 2008

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.


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


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


Include prototype.js and textareamate.js:

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

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

It plays well with rails:

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


← Back to home