Is there a good in-browser code editor?
JavascriptIdeEditorDhtmlJavascript Problem Overview
We've all seen in-browser rich text editors, which allow you to edit colored/styled text in a WYSIWYG manner. But what about code editors, which automatically highlight code based on language rules as you type? Think Eclipse in a textarea (but without the refactoring support).
Do such things exist? I imagine scaling would be a problem - larger files would be difficult to edit efficiently.
Javascript Solutions
Solution 1 - Javascript
CodeMirror comes with support for 60+ languages, and addons that implement more advanced editing functionality (autocompletion, code folding, configurable key bindings, search & replace, linter integration etc.). A rich programming API and a CSS theming system are available for customizing CodeMirror, and extending it with new functionality.
It has been developed since early 2007, has a Wikipedia page, and is being used in a wide number of popular open source projects (Joomla, Firebug etc.).
Solution 2 - Javascript
Ace. They don't use an iFrame.
Solution 3 - Javascript
The http://www.cdolivet.com/editarea/?page=editArea">editArea</a> javascript library does a pretty good job. It's used by the http://www.opencms.org">OpenCMS</a> content management system as it's in-place JSP and JavaScript editor. The colorization gets a bit confused when the file is > 2000 lines or so.
The feature list from their page is:
- Easy to integrate, only one script include and one function call
- Tab support (allow to write well formated source code)
- Search and replace (with regexp)
- Customizable real-time syntax highlighting (currently: PHP, CSS, Javascript, Python, HTML, XML, VB, C, CPP, SQL, Pascal, Basic, Brainf*ck)
- Auto-indenting new lines
- Line numbering
- Multilanguage support (currently: Croatian, Danish, English, French, German, Italian, Japanese, Polish, Portuguese)
- Full screen mode
- Can work in the same environment than "protype" and "mootools"'s like libraries.
Solution 4 - Javascript
Mozilla's Bespin looked very interesting, but the project was discontinued.
Solution 5 - Javascript
Cloud9 looks interesting if you're a JavaScript developer.
Amy Editor is another browser-based editor I've come across today - it looks like it is trying to emulate TextMate in the browser - including Bundles and Snippets - although the project looks like it's likely dead... Homepage/Demo and source on GitHub
Solution 6 - Javascript
you can check out dockPHP StackHive for web development (based on codemirror). Right now it supports HTML/CSS development but I am working on live javascript-ing as well..
Disclaimer : I am the founder at dockPHP :)
Solution 7 - Javascript
Javascript VI, has some bugs but is an interesting idea. VI FTW!
Solution 8 - Javascript
This is a sideways suggestion -- but I use the https://addons.mozilla.org/en-US/firefox/addon/4125">Firefox plugin "It's All Text!" to send my text-areas to
Of course, this is user-dependent, and can't be easily rolled-out to visitors, if that is your intent.
However, I tend to get irritated by the limitations of in-browser editors, anyway. (The way SO captures my C-k during edits STILL catches me off-guard... [which means I don't edit everything in Emacs...])
Solution 9 - Javascript
I use codiad. I used it with PHP, js and C. Features:
- Support for 40+ languages Plugin Library
- Error checking & notifications
- Mutliple user support
- Editor screen splitting
- LocalStorage redundancy
- Advanced searching tools
- Smart auto-complete
- Real-Time Collaborative editing
- Over 20 Syntax color themes
- Completely Open-Source
- Easily customized source
- Runs on your own server
- Quick-Download backups
- Maximum editor screen space
- i18n Language Support
Solution 10 - Javascript
Eclipse Orion provides a full-blown Code Edit and a minified Orion Editor. You can see its demo here.
Solution 11 - Javascript
codesandbox.com is an up coming choice for several frameworks.