Local editors in HTML5

Question

I am wondering if the current state of HTML5 allows editing local files. More precisely, I mean:

• Files are not served by the server (they are located on file:// ), or in the worst case, by the local server
• The editor is located either in the local file system or is served by an external server
• It would be better if I did not use the browser extension
• The overall goal is to create an interactive IDE that does not require a page reload or manual file insertion

I know there is a fileSystem API, but from what I read seems to be for chrome extensions only? What about listening to file changes?

I also noticed on trace.gl that you can create links that open a local text editor after a click (for example, in the Chrome console).

Is it possible to reproduce what we can see on trace.gl , but in combination with access to the local file system and listening to events of file changes in order to create some kind of local IDE?

Edit for greater accuracy: the goal is to create an IDE. Think, for example, of the IDE code (Eclipse ...), which shows all files and a directory from the workspace, and also listens for changes, can read / write in real time, etc. This is what I would like to achieve. PS: it can be a browser if necessary.

Answer 1

I am wondering if the current state of HTML5 allows editing local files

Yes and no. The HTML5 File System API is implemented in all recent browsers (IE10, iOS6, Chrome, Safari, Firefox). However, it does not give you full access to the users local file system. To quote the specification:

This specification defines an API for navigating file system hierarchies, and defines a means by which a user agent can expose sandbox sections of a user's local file system for web applications.

The keyword that is stopping you from doing what you want to achieve is "isolated." Under the covers, when you use the HTML5 file system API, it will create a completely new directory for the current page.

This may allow you to achieve what you want if you are happy that your page has its own sanboxed directory, however, if you are creating an IDE, I suspect you need a little more control than this.

IDE in browser

There already in fact the IDE browser environment does similar things with what you ask:

• Cloud9 - https://github.com/ajaxorg/cloud9/ - This works, starting from the Node.js web server and pointing to the directory with your project in this. Then the files are viewed by the browser browser.
• Orion - http://wiki.eclipse.org/Orion/How_Tos/Install_Orion_on_Localhost - This is an Eclipse-based project that works again, starting from the local web server and serving files to the browser.

My advice will begin by looking at their code bases - both of them are open source and in fairly stable condition. You can either branch out one of them to achieve your goals, or use them for ideas on how to get started.

Answer 2

According to HTML5 Rocks , the ReaderAPI file is implemented in the latest versions of major browsers, and the file system and Writer file APIs are implemented in both Chrome and Opera. More information on using this API is available in this file system API tutorial .

From my understanding of a working project, it is impossible to observe file changes.

If you are not strictly limited to HTML5, you can see how TiddlyWiki manages to save files locally using the Java applet, see the Dropbox Datastore API , which uses Dropbox as a kind of database or Dropbox Saver Drop-in .

Answer 3

If you are using a Mac, you can tell the browser to open the local network as if it were on the server. Since Mac OS X ships with Apache, you can use http:// instead of file:/// and it will open with the Apache web server instead of viewing the file. This will load it as on a remote server. You can use any text editor or IDE if it is saved on the local file system. It is browser independent. To download new changes, just save the page and refresh your browser.

Hope this helps!

Answer 4

Chrome Canary (at the time of writing) has something called Workspaces that allows you to map pages to files on disk so that the changes are saved. Otherwise, you may need to serve local files through the web server, and then send updates to the web server, where they can be recorded.

Answer 5

Not exactly HTML5 APIs. But there are some browser-specific solutions.

For example, in IE, you can achieve this through ActiveX and FileSystemObject :

 Set fs = CreateObject("Scripting.FileSystemObject") Set a = fs.CreateTextFile("c:\testfile.txt", True) a.WriteLine("This is a test.") a.Close 

In FF, this can be done using XPCOM . For other browsers, you can use JAVA applets.

You can also look at the twFile jquery plugin (basically a wrapper for the methods described above).