51

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.

levik
  • 114,835
  • 27
  • 73
  • 90

11 Answers11

40

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.).

niutech
  • 28,923
  • 15
  • 96
  • 106
interstar
  • 26,048
  • 36
  • 112
  • 180
  • 1
    looks like exactly what I'm after, thanks – Chris Simpson Oct 20 '09 at 18:51
  • CodeMirror is great and is used by Google's API playground: http://code.google.com/apis/ajax/playground/ – Michael La Voie Jan 20 '10 at 20:07
  • doesn't have even basic code completion (like double auto brackets, etc), indentation doesn't seem to work properly, not sure this is a great choice.. (I just tried out their live demo) – Rick Aug 11 '10 at 21:30
  • 1
    http://www.codemirror.net/2/ (version 2) is now available. – David Murdoch Mar 02 '11 at 13:00
  • Just to add on to this answer, I created an in-browser code editor using CodeMirror. I added file and user management into a nice UI. You can get it here http://backdoor.shannonreca.com – SReca Oct 28 '15 at 20:31
13

Ace. They don't use an iFrame.

niutech
  • 28,923
  • 15
  • 96
  • 106
crizCraig
  • 8,487
  • 6
  • 54
  • 53
8

The editArea javascript library does a pretty good job. It's used by the OpenCMS 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.
Jonathan Holloway
  • 62,090
  • 32
  • 125
  • 150
Tim Howland
  • 7,919
  • 4
  • 28
  • 46
  • That link did not work for me....think I found it here: http://www.cdolivet.com/index.php?page=editArea&sess=a360c094f88adf6d14a74197bdd1a182 – Nick Perkins Aug 26 '10 at 18:54
  • 1
    While this is now on git (https://github.com/cdolivet/EditArea), it is no longer supported and also vulnerable to XSS. – Ed Norris Nov 01 '16 at 19:19
7

Mozilla's Bespin looked very interesting, but the project was discontinued.

Dan Dascalescu
  • 143,271
  • 52
  • 317
  • 404
interstar
  • 26,048
  • 36
  • 112
  • 180
  • I saw Bespin also and had been trying to implement (just the embedded version) and can't get it to work, it seems promising but they don't have much documentation so maybe its not the best choice to start out with as I can't find a support forum or anything to get feedback on what I might be doing wrong – Rick Aug 11 '10 at 21:26
  • 1
    Bespin has been merged into [Ace](http://ajaxorg.github.io/ace/) – niutech May 05 '16 at 10:09
2

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 :)

niutech
  • 28,923
  • 15
  • 96
  • 106
Kshitiz
  • 2,852
  • 5
  • 32
  • 41
  • 1
    :P nice self promotion there – iptq Jul 24 '14 at 03:35
  • 1
    it looks pretty nice too, but what i'm really looking for is just a good text editor like eclipse but that you can use in your browser. some features might be when you press { it automatically inserts } and starts a new line or something. – iptq Jul 24 '14 at 03:37
  • 1
    haha thanks.. I am actually working on revamping a major part of dockPHP... You can look into Nitrous.io as well.. other wise the simplest option would be to use Codemirror to patch something up for yourself. They have an extensive tutorial.. and you can control what features to enable. – Kshitiz Jul 24 '14 at 04:50
  • nah i'm using ace editor now it's all guud :P – iptq Jul 24 '14 at 20:04
  • codemirror looked pretty good but i think ace looks a lot better – iptq Jul 24 '14 at 20:06
2

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

niutech
  • 28,923
  • 15
  • 96
  • 106
Chris
  • 6,568
  • 3
  • 22
  • 21
1

Javascript VI, has some bugs but is an interesting idea. VI FTW!

niutech
  • 28,923
  • 15
  • 96
  • 106
hacama
  • 339
  • 2
  • 5
  • that doesnt work in my browser.. perhaps it is because i am using the vimperator plugin for FF. vim ftw! –  Jan 09 '09 at 21:06
1

This is a sideways suggestion -- but I use the Firefox plugin "It's All Text!" to send my text-areas to for editing -- all good markups,searching, etc.

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...])

Michael Paulukonis
  • 9,020
  • 5
  • 48
  • 68
  • this is really helpful actually, I think its one of the best options currently available, for me, I'm trying to build an IDE interface so I can do things like have multiple file folders open at once (I hate scrolling up and down through folders) so this seems like a perfect fit since you can just get the text from a text area and edit it using an external editor – Rick Aug 11 '10 at 21:31
1

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

http://codiad.com

Hamboy75
  • 938
  • 1
  • 11
  • 22
0

Eclipse Orion provides a full-blown Code Edit and a minified Orion Editor. You can see its demo here.

niutech
  • 28,923
  • 15
  • 96
  • 106
0

codesandbox.com is an up coming choice for several frameworks.

Chance Smith
  • 1,211
  • 1
  • 15
  • 32