Comparison of JS Libraries for Textarea Tabbing

Update - 01/27/2014: Updated library versions

Update - 08/27/2013: Revised table for Tab Override v4.0.0 and tabIndent.js v0.1.8

A few years ago, I was trying to format some HTML in the WordPress HTML editor and was frustrated by the lack of tab key support. The normal behavior of the tab key is to move the focus to the next focusable element on the page. Since this is also true for textarea elements, pressing the tab key in a textarea will move the focus away from it. Users have come to expect the tab key to function this way and changing it would most certainly be confusing. However, when the purpose of the textarea is to input code, it seems more natural for it to behave more like a simple text editor.

I came across a plugin called Tab Override by Mathew Tinsley which did exactly what I wanted, except it didn't function in all browsers and only supported inserting a single tab character at the cursor. I also found several other JavaScript implementations, including Ted Devito's Tabby jQuery plugin. However, I thought all of these could be improved upon. I did a complete rewrite of the Tab Override plugin and eventually separated the JavaScript into its own library. I've maintained the projects ever since.

Recently, some new projects have appeared that address the same issue. Two of the more popular ones are tabIndent.js and Behave.js. The projects are similar in a lot of ways, but take slightly different approaches and have different feature sets. The following is a comparison of the tabbing/indenting-related features of Tabby, Tab Override, tabIndent.js, and Behave.js:

Continue reading

Projects Update

I haven't posted anything in a while, because I've been very busy collaborating on an exciting new project using Node.js and Knockout.js. It will be announced soon! UPDATE: Unfortunately, this project has been discontinued.

However, since my last post, I have made some fairly large improvements to some of my projects. The most significant changes have been to the Tab Override jQuery and WordPress plugins. There is now a standalone JavaScript version of Tab Override and the jQuery plugin has been turned into a wrapper for this standalone version. This allows developers to utilize Tab Override without the need for jQuery. In addition, it is now quite easy to create wrappers for other popular JavaScript libraries such as Prototype. Other updates include the addition of a build system using grunt, Bower package registration, and AMD support.

See the GitHub repositories for the full changelogs and documentation.

Movie Picker Project Analysis, Part I

The Movie Picker project was originally done for a course I took. We had to create a dynamic JavaScript menu system that presents the user with a series of questions that change depending on the answers given. Once enough information is gathered, the result is displayed. I chose movies as the subject for my menu system. Given the specific requirements of the project, it's more of a demonstration rather than something that most people would find useful.

Nevertheless, I decided to revisit this project several years later with my more advanced JavaScript skills. It was completely rewritten and made more flexible / reusable. I decided to release this version under the MIT license in case anyone finds something useful. The following is an overview of how the code works.

Continue reading

Tab Override 3.1

The Tab Override WordPress plugin was just updated to version 3.1. This release includes a new option to add a tabs on/off button to the HTML editor toolbar, allowing you to quickly enable or disable the plugin while editing a post or page. This release also includes several important bug fixes.

To get complete details and download the latest version, visit the Tab Override page at the WordPress Plugin Directory. You can try out the latest version of the jQuery plugin on the demo page.

Extending Tab Override

A common problem with WordPress themes and plugins is users making custom modifications to them only to have their work erased when the theme or plugin is updated. To avoid this, you can create a child theme that extends the original theme or a plugin that modifies another plugin. Tab Override version 3.0 provides a global object and hooks just for this purpose.

The $tab_override Global Object

As soon as the plugin code is executed, a global object named $tab_override is created. This object is an instance of the Tab_Override class. You can use this object to check if the Tab Override plugin is installed and activated. Normally to check for another plugin you would do something like this:

Continue reading

Tab Override 3.0

The Tab Override WordPress plugin was updated to version 3.0 today. This is an almost complete rewrite of the plugin and includes several new features, notably:

  • a new auto indent feature
  • translation support
  • the addition of tab_override_init and tab_override_add_scripts hooks

In addition, there are enhancements to both security and performance as well as a new uninstall procedure and much improved documentation. Most of the code was refactored into a class. Since some PHP 5 features were utilized, PHP 4 is no longer supported. This version of the plugin also includes support for the upcoming WordPress 3.2 release and the fullscreen editor mode.

Download it and give it a try!