Easier Editing in ExpressionEngine and WordPress

Oct

2008

My only gripe when I started editing template code in ExpressionEngine was doing my editing in a textarea within the browser.

Using It’s All Text in Firefox 3 on Ubuntu

How do you keep your code properly indented when you’re coding in a textarea?

Spaces are no good, Tab just jumps you out of the textarea. Even good old copy and paste doesn’t work—even from Notepad without having to copy and paste the entire textarea back and forth.

When writing posts in WordPress, you’re not really dealing with a ton of actual raw code that needs formatting. But what about when using the theme editor or editing code in ExpressionEngine?

How can you keep your code from being all jumbled and akimbo when editing in a textarea?

Plugins To the Rescue!

2 browser plugins—Saft for Mac/Safari users and It’s All Text for Windows and Linux Firefox users.

Both plugins do the same thing: Edit the text in any textarea in an external editor of your choice and then save the text back to the textarea.

It even gives you a nice AJAX-like update glow in your textarea to let you know it made the update.

Macs

Saft is a useful developer plugin for Safari. One of its many features is that it can link your textareas to an external editor like TextMate or Coda.

Windows and Linux

For Windows and Linux, there’s It’s All Text, a plugin/add-on for Firefox, which does the same thing. You get to pick virtually any program as the external editor. In Windows, I have mine set to use Notepad++, and in Linux (Ubuntu), gEdit.

To edit the contents of a textarea, just hover your mouse over the textarea and a small purple button will appear. Click it and it launches your external editor with the content from your textarea loaded.

The only slight weirdness with setting up the plugin is that after installing the add-on the first time and restarting Firefox, you will need to choose which editor you want to use. Then, you must restart Firefox again before it will save your changes. Once that’s sorted, it works just fine.

If you’re a Mac user who doesn’t want to shell out for Saft, you should be able to use It’s All Text with Firefox on Mac, but it takes a little extra work to get it set up.

The great thing about these plugins is that they work with just about any regular textarea on a page, so you can use them in ExpressionEngine, WordPress or any other CMS or website that allows editing or posting via textareas.

They’re also useful when posting long-winded comments on blogs or forums.

Other Useful Plugins?

Are there other browser plugins that you use when developing in ExpressionEngine or WordPress? Leave a comment and tells us about it.

7 Comments to 'Easier Editing in ExpressionEngine and WordPress'

Dan Lee
October 21st, 2008

Saft didn’t work with me for Safari. I’m running version 3.1.2 and I’m on leopard. Also, I tried to install It’s All Text so I could use it on my Firefox for Mac and the “edit” pops up but It doesn’t recognize any of the apps that we actually use to edit code like cssedit or smultron.

Reply To This Comment

Shawn
October 21st, 2008

@Dan Lee -I don’t personally have a Mac, so I can’t vouch for Saft.

From what I’ve read, It’s All Text takes a little extra doing to work on Mac. There’s a link on the It’s All Text Firefox add-on page about getting it working on Firefox for Mac. You can read it for yourself here:

http://docwhat.gerf.org/2007/0...../#comments

There are some tips in the comments on that page from people who have gotten it working in Mac OS X.

I do have Linux (Ubuntu) and the directory structure should be about the same as a Mac. I didn’t have any problem getting it working on Ubuntu once I realized I had to restart Firefox one more time. I just pointed it to the application binary that was placed in