Dreamhacker

January 31, 2008 4:30 AM

I would like to write my own HTML/CSS editor. What would be the best way to go about it? (more inside)

I've been a professional web developer for the last 8 years or so. I've used Dreamweaver all the way back since the very first beta came out way back when. Without a doubt, it's the best tool for the job (for me).

Saying that, I only ever use Dreamweaver to write code. I don't use any of the visual tools, or any of the built in javascript or back end helper code. I'd say I maybe use 15% of all it's features. It got quite bloated over the years, but it's that 15% that's keeping me from ditching in altogether and going with something like Komodo edit or one of the other open source tools like Bluefish or Aptana.

These features are:

1. The awesome tab completion and code hinting for HTML/CSS
2. Code coloring
3. Color pickers when defining colors on the fly
4. File picker when defining background image files on the fly
5. Code formatting/indentation

My question is, how hard would it be to write my own standalone editor that could do these things, or could I extend another existing software package (like Eclipse) to do it? I would like to make something that would be cross-platform and free.

Apologies for the long-winded post. I throw myself at your feet, hive mind!

posted by ReiToei to computers & internet (14 comments total)

Edit: I don't have a lot of experience developing desktop applications barring some experience with Java/Swing. I do a lot of PHP and I'm currently teaching myself Python.
posted by ReiToei at 4:33 AM on January 31

Best of luck if you are using this as an educational experience. Most of the industry seems to overwhelming love CSS Edit (not free) for a lot of the reasons you stated above (plus a whole lot more).

I would imagine that it would be fairly difficult to pull something like this off. One of the more interesting open source projects that I've seen (if you're a Windows user) is Notepad++. There is a fairly extensive plugin system for the application and a lot of language definition files. You could try to extend its CSS editing capabilities by either writing a plugin or modifying the language definition files (supposedly there is a lot of wiggle room in there).
posted by purephase at 4:44 AM on January 31

If you are teaching yourself Python, have a look at wxPython (GUI library); download it *and* the separate comprehensive demo.

From memory (I have not used it in a couple of years...), the demo would show you:
The scintilla based editor (stc_textcontrol or something like that ... ) can help you take care easily of 2) code coloring and 5) code formatting. I'm quite sure it has at least one example (probably more) of 3) color pickers, and likely 4) file pickers.

Good luck!
posted by aroberge at 4:56 AM on January 31

There are plenty of existing editors that might meet your requirements, e.g. I used to use TopStyle Pro on Windows (not sure if it allows file-picking for backgrounds, but it certainly lets you drag images in from the sidebar to create img tags).
posted by malevolent at 5:37 AM on January 31

Another vote for Notepad++. I am pretty it can do everything you want with a couple of plugins.
posted by DJWeezy at 5:55 AM on January 31

Yet another vote for Notepad++. I use it almost exclusively for writing CSS and HTML. Excellent program.
posted by JJ86 at 6:13 AM on January 31

I understand your desires. I had used the same HTML-oriented text editor for nearly as long as you've been using Dreamweaver, and moving away from it was painful. (I ended up dropping it because the author rewrote the program in Java, and I absolutely hated the new version.) I still keep the old version around as it has a couple of features I haven't been able to find in other programs, but I've probably opened it less than 10 times in the last two years.

While the idea of taking the program you already like and creating a clone of the features you actually use sounds good, I don't know if you're going to be able to start from scratch as easily as you would be able to take an existing project and extend it. I'd start by finding one of the open-source projects and look at the code. See what it has that you are missing, and add to it. The ability to add XPI-based extensions to Komodo seems like a really good place to start, as it's probably much easier to create add-ins to supplement what is already there than it is to parse the code of an entire project and start hacking. Plus, it's already cross-platform, and free, two of the things you mentioned you would like.

Whatever you do, throw it up on Projects and let us know. While I've found editors that are working for me for the most part (Notepad++ on Win and Textwrangler on OS X) my dream editor is still waiting to be created. Maybe what you want to create is exactly what I am looking for, too.
posted by caution live frogs at 6:28 AM on January 31

I use the PDT distribution of Eclipse. It has a lot of the html and php functions you describe and after some quality time with the preferences (of which there are many) I was much happier than when I used the source mode of Dreamweaver. And of course, as you mention in the [more inside], you could write whatever else you needed. Of course, every time I think I have an idea for what I need, I find it there under some preference I swear wasn't there last time.
posted by advicepig at 6:46 AM on January 31

1. Writing programs is (as you probably know) lots of fun! So I'd just go for it, and I wouldn't be discouraged. However...

2. If it were easy to do what you wanted to do, Adobe would have been out of business a long time ago. If the features you liked were easy to write, everyone would have them. So don't think you're going to get out of this without some serious thinking and some serious coding. And this Joel Spolsky essay may shed some light on why your software is "bloated" but why that's necessary, too (short version: if they were to cut it down, they'd be cutting features somebody couldn't live without--maybe you.)

As for how you'd actually go about this: I'd be a bit worried about the scripting-based solutions. Experience has shown that when you start doing more complicated things (i.e. all the stuff you want) then 2 things happen: everything ends up being slow, and you start fighting the API. Also, the idea of doing syntax highlighting from JavaScript doesn't sound good at all.

What I'd do is pick a cross-platform GUI toolkit (probably QT) and a high-level scripting language (in my case Python but only because of familiarity) and start writing a prototype. At some point, you may have to do two things to get the speed and versatility you want: 1) start writing C++ code and integrating it with Python; 2) start learning about the widget API for your GUI toolkit because you might have to write some non-standard widgets. So be prepared for these.

Good luck!
posted by goingonit at 7:02 AM on January 31

Color-picking and file-picking are easy.

The other three items on your list require knowledge of lexing/parsing, so start looking for lexing/parsing engines and learn how to use them. Lex and yacc are the canonical examples, but any modern language will have a 3rd-party package for doing this (ply for Python, ??? in Java)

If I were you (which I'm probably not), I'd start with a text editor that built-in programmability and syntax coloring, e.g., Emacs (Lisp) or Vim (python-vim). I suspect that the Eclipse framework is overkill for your application, but who knows? [plus, I hate Java]
posted by qxntpqbbbqxl at 8:19 AM on January 31

Cheers for all the awesome advice and encouragement. If I can get my ass into gear and actually do this (everybody should have a pet project, after all) I will most definitely post it on projects. I tip my hat to thee, collective consciousness.
posted by ReiToei at 9:16 AM on January 31

Check out WeBuilder, I use it quite a lot and like it!
posted by raildr at 9:25 AM on January 31

wxWidgets and wxstyledtextcontrol (which wraps scintilla) will let you do this.
posted by null terminated at 11:25 AM on January 31

Sounds like Coda, TextMare or BBEdit (plus plugins) could pretty much do what you're looking for. But that's a bit outside of your questions at hand.

From my experience, people find an HTML/CSS coding program that works w/their comforts and they stick with it (much like you've decided to use DW for what is basically a text editor). People will defend their choice vehemently and only occasionally try something different for a few minutes before writing it off because "it doesn't do feature X and I just can't live without feature X".

I'd honestly look at the the aforementioned suggestions from the users above, and see what about those programs people are really diggin' on. Then, try to come up with a happy medium between features and bloat.

If you wanna be really spiffy - make a "lite" version for free, but with less features and a "full" version with all the whizbang you can imagine, and charge for it. It's like heroin - hook 'em on the cheap/easy stuff first ;)

Good luck!
posted by revmitcz at 11:36 PM on January 31