Steen Nielsen | Web, Development and Random Thoughts

Intuitive web scripteditor

Over the years, I've seen several bad or at the best, mediocre web-based script editors. And when talking about script-editors, I don't mean a WYSIWYG editor, I mean an editor, that you use for typing in code, especially html, css, javascript, xml, xslt and other web-related technologies.

I often work at different computers, that I can't  install new software on, so I will have to do with what I've got, or I have to have a USB-dongle with me, containing stand-alone versions of the development tools, which I use.

I don't always like to do any of those options, so I was wondering how much it would actually take to create a, first of all, basic script-editor, and later on a more advanced one, perfectly suited for my needs (and maybe also yours). You might be saying duuuh there's the textarea?!!? And yeah, you are absolutely right, the textarea is really the most basic script-editor that is available to us. But lets first take a look at what makes a basic html textarea different from a great desktop script editor.

  • Lack of CTRL+S support (and in general all keyboard shortcuts).
  • No indentation possibilities with the use of the TAB key, including indentation over multiple lines.
  • No control over a TAB's size (it depends on the browser).
  • No inline colorization of the text.
  • If you accidentally refresh the page, depending on which browser you use, the text will be lost, the focus changes from textarea to somewhere else(?), and if you had scrolled down a long way in the text, then it will start at the top of the textarea again.
  • No node-folding possibilities.
  • No highlighting of the relevant start or end tag or of () {} [].
  • no line-numbers.
  • no code-help / intellisense or what ever you call it.
  • Oh, I could probably go on for a while, but this will do for now, or I might expand the list later.

Now that we have the "basics" done, what do we need to get started..? well, a textarea :) I will be looking into what is possible with just a normal textarea through enhancing it with javascript. I know that colorization won't be available at all, but some of the other features might be possible, and that's what I've set out to do.

So far, I have put keyboard shortcut support, tab indentation (even over multiple lines) into a normal textarea. There's still a bit to do, and this article will be extended, as soon as I get the time to do it.

Oh, yeah and when you refresh the page, it will resume to the exact spot in the code, that you were, even if you had selected some text at first. At the moment it still rely on the browsers memory for the content of the textarea. I'm using Firefox which remembers everything in forms as long as it's a normal refresh and not a cache clearing one (CTRL+F5).

 I will make sure that an example is put up as soon as I've made it work without any bugs.

Latest blog entries


Latest project entries


RSS feed for the blog