This is just a short note I make to remember what I just found on the web. You perhaps no the WYSIWYG editors out there, converting an ordinary <TextArea> to a full featured text editor similar to Microsoft Word (or lets say OpenOffice Writer).
I'll name some WYSIWYG editors first, so you can get them if that's what you're looking for:
If this is what you are looking for, you might want to leave now. But if you're looking for something turning your TextAreas into a code editor with syntax highlighting, you better read the whole article.
I found three free tools for this purpose on the web, discussed below.
Sorry for continuing this article so late, but there were many other things to do before I finally got a real world scenario that really requires syntax highlighting for HTML or perhaps PHP.
CodePress is currently at version 0.9.6 (published September 26th, 2007, so a rather old piece of code in changing times like these). I've got a normal textarea input element. Applying CodePress to it is as simple as expected: just include the JavaScript code and add some proper attributes to the <textarea>. The code at the end looks like:
<textarea name="content" id="ContentArea" class="codepress html linenumbers-off readonly-off" cols="80" rows="20"></textarea>
The code highlighting is quite nice. Furthermore CodePress allows usage of tabs, structuring the code nicely.
Unfortunately I rather quickly had to find out the id and class attributes cause the form to fail sending the content of my textarea. The "content" element is never transfered via post, but it is when I removed id and class. So it must have something to do with the JavaScript of CodePress. The worst is most developers are inpatient and continue testing other similar components. That just like me, and therefore lets continue with EditArea right now.
EditArea is a SourceForge-hosted project currently at version 0.7.2.3. The developers seem to be french or something, but most parts of the website are pretty good english.
Installation of EditArea differs a bit from CodePress. CodePress finds all TextAreas of class prefixed by "CodePress" or something, while (at least at first glance) EditArea requires to run an initialization procedure and that way attach to a certain TextArea. If that certain TextArea doesn't exists, it causes the JavaScript engine to report an error. One has to make sure the TextArea exists.
EditArea provided a nice looking editor with undo/redo, fullscreen, search, font-size selection and resizing features. Most of them do not work for me under Internet Explorer 7 (IE 7), but nearly all work under FireFox 3 (FF 3). On FF 3 for example, the fullscreen feature works.
The good thing is you are able to disable the EditArea via checkbox on demand, so at least the EditArea won't break the form it should enhance. Also, there was a strange text snipped I found when pressing the about button of the editor: "Notice: syntax highlight function is only for small text". How comes? I'll of course tell you if I ever find out.
Currently Helene version 0.5 is ready for download, although a version 0.9 is announced on the homepage. The website also states Helene development has moved to Google Code, but there's nothing about it to find at Google Code. Please correct me if I'm wrong, but this is not the best situation to make a choice for Helene, and therefore my comment about it ends here.
Finally after having this quick look at the above tools, I tend to decide for EditArea. It seems to have a lot of potential and I can feel familiar with using FireFox 3 more often.
great! CodePress is the best
great! CodePress is the best one to me... Others are cool too
Thaks for the article.. has been much usefull!
Martin
yes, CodePress is really
yes, CodePress is really good, and it's been integrated by Wordpress. Excellent tool!
Codepress works great on form
Codepress works great on form submits if you use:
The problem doesn't seem to be with the class or id attribute its with the way the codepress script modifies the textarea attribute. I found it always return the post value empty so you need to toggle it off on submit.
Codepress works great with
Codepress works great with form submits if you use onclick='return textarea_id.toggleEditor();' with your submit element.
"Notice: syntax highlight
"Notice: syntax highlight function is only for small text". How comes? I'll of course tell you if I ever find out.
Having made a textbox editor from scratch in c++, i'd say that is a biproduct of how they chose to implement syntax highlighting. there are a number of different approaches - one is every time a keydown event happens (or keyup, whatever) to parse the entire document for highlight changes.. this is likely the worst approach.
it may not be that exactly, but that could be a reason - lack of line / special point indexing can cause highlighting to be very bulky and slow on large groups of text.. seperating it is crucial.