Friday, May 25th, 2007
Implementing a syntax-higlighting JavaScript editor in JavaScript
Category: JavaScript
, Library, Showcase
Marijn Haverbeke has not only been able to create a syntax-highlighting JavaScript editor in JavaScript, but he has written up the story of the brutal odyssey to the dark side of the DOM tree.
The story is a great romp through the never-never-land of JavaScript, DOM, and browser “quirks”. It is well worth a read to find out about fun with selection, designMode, parsing, and much much more.
A huge kudos to Marijn.
(via Dean)
4.3 rating from 48 votes
Amazing!
Very very cool.
We need an Ajax community equivalent to Colbert’s “Alpha Dog of the Week.” Big ups!
Very nice. But I think it’s better to use a textarea then apply the source formatting behind it. Since if you paste rich content in a designMode iframe it will be presented as rich content, it will not be converted into plain text. This editor uses a textarea instead, petty neat trick: http://cdolivet.net/editarea/editarea/exemples/exemple_full.html
We actually wrote an editor with syntax highlighting, with javascript in the browser, that uses JEdits syntax files. It worked with mixed languages and all. That was a fun…….
Very nice work Marijn, keep up the good work!!
OMG. Marijn. you just gave me an editor. I’ve done almost everything else for the JDA composer, and my (non) editor sucked completely. Thank you, Thank you, Thank you.
May Googles sourcers light your path.
Marijn I had not problems with Opera and RETURN key with indentation in my overbyte editor but it’s quite different from your (it has highlight but not inside area).
If You need sources to view indentation and KEY management just tell me but at this point I suppose we (all) need a kind of Textarea API that works with every browser, too much difference just between IE and FireFox and I saw a nice article on quirks blog about text management.
Has anyone time to create them? :D
(last point: really nice work!)
Great work, Marijn! :)
A different (and insane) approach to avoid cross-browser inconsistencies and take the full control over the caret position: a caret “emulator”…
Very experimental!
Nice one, but it’s code too large, if to compare with Codepress. Why not to use something smaller than MochiKit? Mootools maybe? or no libraries at all?
I’m really impressed by both the main example and the example posted above in the comments. It seems that most of the focus of inline editors has been the HTML side for our clients, but every once in a while it’s nice to have something like this in your toolbox, if you know that you’re going to be the one doing most of the maintenance. The one thing missing from all the examples I’ve seen — which would take it over the top as far as I’m concerned — is tag/function insight and completion… Typing in the > sign of a block tag could create the closing </tag> automatically, just on the other end of my cursor. Or if I type in a ( it could automatically put in the ) on the other end of my cursor. You get the point. Function/tag insight would seal the deal.
Aside from the Opera/Safari bugs, CTRL+Z support would be nice. I’d also suggest that you add a hidden textarea with the contents as this would relieve form submission and such.
For my german spoken Learn-To-Program-eLearning-Application “ProgrammierABC” (http://www.mnn.ch/abc/html/index.html) I implemented an editor, too (see http://www.mnn.ch/abc/html/ProgABC_codelab.html).
May we can learn from each other…
Oh hey, people are blogging about me!
Ryan Breen: The reason I do not use a textarea is that automatic indentation will get too slow for big chunks of text — the whole text has to be read out of the dom node, modified, and put back every time.
Andrea Giammarchi: Cool approach. Someone has shown me a vi clone that does something similar. It is quite a can of worms too though (the one you link gives me $ and # characters when I press and — in Firefox 2.0.0.3 on Linux)
Mike Ritchie: Hmm, ctrl-z works for me.
Nicola Rizzo: Heheh, yes, MochiKit is a bit fat. But it provides really really nice tools. I didn’t put it through any minimizer on the page that demonstrates the editor, minimizing cuts it down to 86K.
(Ehh, I wrote [home] and [end] in the thing about the $ and # characters, but they got eaten as HTML tags.)
Hi Marijn,
my editor is an alpha version, it gives $ and # instead of [home] and [end] even in IE and Opera ;)
Nice work. I created similar editor cca two years ago (http://los.php5.cz/codearea/codearea.html - press Load button to load more content), which is based on another one (http://helene.muze.nl/). I had not time to do some polishing (for opera mostly)…