As a developer from way back, I have found that the best approach is to hand-code the markup.

That said, I have also finally moved to the web for much of my work flow: Much of the things that I used to write in a text editor and then upload, and I am now creating directly in the browser.

So, while the rest of the world wants wysiwyg, I want a decent browser based text editor, with a small footprint.

Update: since I first wrote this article, almost three years ago, I am still using this editor — to make this note in fact!

I have switched to Markdown, and now I'm even more convinced that this is the way to go — never more productive...

My hope is to use a textarea augmented with a bit of css and javascript.

Requirements

So what are the features that comprise a professional quality coder's editor? Here are my minimum acceptable requirements:

• Mono-spaced font - things just have to line up when you are writing code
• No auto-wrap - for the same reason as the first item
• spell-check - I want it when writing content, but not for scripts nor styling
• Find & replace - absolutely essential, and it must support case-sensitivity and replace-all
• Cut/Copy/Paste - also essential, but I am ok with with using the keyboard shortcuts
• Extensibility - I like to be able to add toolbar buttons to streamline common actions

What's Out There?

A few quick searches provided the following

• Mono-spaced font - Forcing HTML textarea to use a monospace font using CSS
• No auto-wrap - The key to this issue came from How to limit the number of characters entered in a textarea of all places! However, the author suggests styling the textarea with white-space: nowrap; overflow: auto, but I had to use white-space: pre; overflow: auto.
• spell-check - Disable spell-checking on HTML textfields
• Find & replace - Find and Replace for an Textarea gives a very naive solution. In the course of trying it out, I couldn't restrain myself from rewriting the code, leading to version 0.0.1 of the editor.
• Cut/Copy/Paste - Actually, as I began doing some tests of the above capabilities, I realized that not only am I comfortable using the keyboard shortcuts — I only use keyboard shortcuts, so I didn't even bother with clipboard to browser issues. (Also, in my research on writing browser extensions, I already knew this would be difficult.)
• Extensibility - This is very doable - I did a quick and dirty link to my media uploader to prove just how easy it will be to insert all sorts of short cuts.

In a nutshell, it quickly became apparent that I should begin prototyping my textarea editor. In fact, I am writing this page in my first stable version!

Quite some time after writing my own, I discovered BBC's JHC Webitor which stands for Javascript, HTML and CSS Web Editor. Making this note simply because it might be useful in the future.

Rabbit Holes

Seems like I always go down some rabbit holes on every project — Oh, well, that Leads to learning some new things as well as some new page content

Draggable Div

I've done this before, you just set position:absolute on the div you want to move. But, this time I wanted a nice reusable method and I wanted to do it right. Seems to me that means

• adding and removing the mouse/touch handlers as needed, and
• specifying the draggable element as well as a handle

Not difficult, but a digression nonetheless. See Moveable/draggable, for some of the issues. Bottom line, I have my reusable code which is better than any of the samples!

Getting & setting Selections

Just a frustrating case of code bloat to deal with browser incompatibilities — as I often do now, I ended up ripping out the IE support!

Here is the link, in case you want to use it How to get selected text from textbox control with javascript

Find/Replace

As mentioned above, the sample code I first used was very naive. But on closer examination, I realized the split/join vs regular expression approaches are an interesting conversation

I use regular expressions since I want case sensitivity and whole words as find options. But then the issue of returning the positions of a regex call is also fraught with possibilities.