Friday, September 28, 2007

TextEditor: Free Unobtrusive JavaScript Code Editor Supporting Web Standards

Easily create a JavaScript enhanced code editor with any TEXTAREA that includes auto-indent, tab stops, auto-complete, XHTML compatibility and more. Did I mention it's free?

I've worked with several older web-based content management systems, that store template code in a database. That means writing HTML in a TEXTAREA. Yuck! Many of them have been updated to include a WYSIWYG editor, be it Java or JavaScript-based. As good as they are, I still yearn for code. Pure, unadulterated, geeky, I'm-in-total-control ... code.

Even with a fancy WYSIWYG editor at my disposal, I turn it off. A plain old TEXTAREA will suffice, but I miss the coding assistance of a real text editor like HTML Kit. I want complete control of my code, and I want a smart code editor all on a Web page. So I built one.

Features of the JavaScript TextEditor:
  • Unobtrusive JavaScript. No need to clutter up your HTML with event handlers.
  • Object-oriented JavaScript. Helps keep the global JavaScript namespace clean and tidy, and simplifies interacting with the editor using JavaScript.
  • Create as many code editors as you want. Want more than one code editor on a page? No problem. Have as many as you want.
  • Create HTML tags in upper or lower case. The HTML 4.01 doctype declares HTML tags in upper case even though they aren't case sensitive. You can have it either way.
  • Set tab stops. When you press the TAB key, it inserts enough spaces to get to the next tab stop. Nice for indenting code.
  • Block Indent. Select several lines of code and hit the TAB key to indent all the lines, or hold the Shift key and hit TAB to unindent each line by one tab stop.
  • Auto-Indent. When you press the ENTER or RETURN keys, the cursor and code is indented automatically to where you were on the previous line.
  • Auto-Complete. Greatly speed up your coding by typing an HTML tag name, highlighting it, then holding the Ctrl and Shift keys down and pressing the "<" key. BAM! Automatic opening and closing tags are created, plus commonly used attributes, and applicable child tags.
  • XHTML compatible. The auto complete feature is XHTML aware.
  • Tabify and Detabify. Did someone actually use real TAB characters to indent the code!? *gasp* Functions are included to convert those pesky tabs to tab stops, and then back again. You'll have to provide the button and the onclick, but the function is available.
  • Escape and Unescape HTML. Does just what it says: Converts "&", "<" and ">" characters to HTML entities, and you can change them back again. Of course you'll need to supply your own button and onclick, but the function is there.
  • Convert newlines to <br> and <p>. Select a bunch of text, and a function can convert all newline characters to page break and paragraph tags. You'll need to create the button and onclick.

The JavaScript TextEditor is completely customizable. When creating it, you can pass several options on a case-by-case basis so every editor can be different.

Browser support for version 0.1

It's an early version and works only in Opera and Firefox on Windows. I tested Safari 3.03 on Windows and found a bug . The Control, Shift and Alt keys do not generate keydown, keypress or keyup events on TEXTAREA's, so the auto complete feature doesn't work, but tab stops and auto indent do. I've reported the bug to Apple.

Mac OS support is upcoming. I need to turn off my PC and fire up my Mac. TextEditor might work on Mac OS right now, but I'll have to double check the keyCodes generated by the event object so the Control, Shift and Tab keys are captured properly.

Internet Explorer users? Well. Your browser sucks and doesn't support the standard methods used to manipulate text in the TEXTAREA, but fear not, Internet Explorer support is pending too. But enough yackin', let's see the code:

Source code for the JavaScript TextEditor

Just click on the box below to select it, then copy.

Implementing the TextEditor

Save the JavaScript code above as TextEditor.js and include it in the HEAD of any page you want JavaScript enhanced TEXTAREA's.

<script type="text/javascript"
src="TextEditor.js"></script>

Next, you will need a TEXTAREA:

<textarea name="body" cols="65" rows="20"
id="body_source"></textarea>

Lastly, you'll need a bit of JavaScript in the HEAD of your HTML document to get things rolling:

<script type="text/javascript">
window.onload = function() {
window.CodeEditor = new TextEditor("body_source");
};
</script>

You can then access that instance of the TextEditor with the global JavaScript variable CodeEditor.

alert(CodeEditor.version);
Future development of TextEditor

In stock for the first full release, version 1.0, is support for Mac OS and Linux. Next up for version 2.0 is support for Internet Explorer 5.5 and newer. I will also be writing an add-on class to create a user interface for TextEditor, which will create a semi-WYSIWYG interface. Think the point and click BB Code editors you see in popular forum software, meets Dreamweaver — and all in your Web browser. Since the basic functionality of the code editor is separate from the user interface, you can have just the code editor, or a full-blown point and click code editor. Upcoming features are:

  • Mac OS and Linux browser support
  • Internet Explorer support
  • Point and click user interface to assist coding
  • Full documentation
  • Downloadable JavaScript files: Uncompressed with documentation, uncompressed without documentation, packed, obfuscated, and both packed and obfuscated.
  • Live preview. Will not require AJAX.
Who can use TextEditor

This script is released under the LGPL license and is free for commercial and non-commercial use. This is still in development so check back again for updates. Any updates to this script will be posted on this blog post.

1 comments:

Seumas said...

This is amazing! I was looking for a way to have automatic indentation in a textarea for a long time. Thanks!