CodeMirror vs Ace Editor
CodeMirror is pretty awesome and it powers both JSfiddle and CodePen. Here is a list of all the tools and websites that use CodeMirror and it is the first library I have tried. There are a ton of demos, good documentation, and a nice compression helper.
I took a look at all the demos and built a simple example that will allow me to drag and drop files, directories of files, and even archive zip files into the browser and I can visualize the contents of files, or code, with CodeMirror (version 3.18). I also added a “view raw” feature that creates a blob object with FileReader and let’s you render any file in a new browser tab or window. Finally, I leveraged ZeroClipboard to easily allow copying of source code to the clipboard.
Drag, Drop, and Edit Code with CodeMirror
Overall, I like CodeMirror and the only performance issues I have encountered happened with big files and special options like line wrapping, which makes sense as I was testing a large minified file. Next, I tried Ace editor. It powers GitHub, Mozilla Add-On Builder , and a lot more. It also has great documentation, API reference, and guides but I really love that it comes with a kitchen sink example. Also, it’s pretty easy to get CodeMirror to work with Emmet (Zen Coding) but Ace Editor has an official example.
Drag, Drop, and Edit Code with Ace Editor