Question

我想知道HTML5的当前状态是否可以编辑本地文件。更准确地说，我的意思是：

文件不是由服务器提供的（它们在file://上），或者在最坏的情况下是本地服务器
编辑器位于本地文件系统上，或由外部服务器提供
如果我不使用浏览器扩展程序
总体目标是创建一个在线IDE，不需要页面重新加载或手动文件插入

我知道有文件系统API，但从我看来它似乎只适用于chrome扩展？听听文件更改怎么样？

我还注意到trace.gl可以创建链接，一旦点击就打开本地文本编辑器（就像在chrome控制台中一样）。

是否可以重现我们在trace.gl上看到的内容，但又能够访问本地文件系统，并监听文件更改事件，目的是创建某种本地IDE？

编辑以获得更高的精度：目标实际上是创建IDE。想想代码IDE（Eclipse ...）的例子，它显示工作空间中的每个文件和目录，并监听更改，可以实时读/写等。这就是我想要实现的。 PS：如果需要，它可能是浏览器特定的

Answer 1

我想知道HTML5的当前状态是否可以编辑本地文件

是和否。 HTML5 File System API规范已在所有最新浏览器（IE10，iOS6，Chrome，Safari，Firefox）中实施。但是，它不能让您完全访问用户本地文件系统。引用规范：

此规范定义了用于导航文件系统层次结构的API，并定义用户代理可以通过哪种方式公开沙盒用户对Web应用程序的本地文件系统的部分。

这些关键字阻止您执行您希望实现的目标＆＃34;沙盒＆＃34; 。在幕后，当您使用HTML5文件系统API时，它将为当前页面创建一个全新的目录。

如果您对拥有自己的沙盒目录的网页感到满意，这可能会让您实现您想要的效果，但如果您正在创建IDE，我怀疑您需要一点点比这更有控制力。

浏览器中的IDE

实际上已经基于浏览器的IDE做了类似于你所要求的事情：

Cloud9 - https://github.com/ajaxorg/cloud9/ - 这可以通过启动Node.js网络服务器并指向包含项目的目录来实现。然后，此浏览器将文件提供给浏览器。
Orion - http://wiki.eclipse.org/Orion/How_Tos/Install_Orion_on_Localhost - 这是一个基于Eclipse的项目，它可以通过启动本地Web服务器并将文件提供给浏览器来实现。

我的建议是从他们的代码库开始 - 两者都是开源的，处于非常稳定的状态。你可以分支其中一个来实现你的目标，或者用它们来获得如何自己开始的想法。

Answer 2

根据HTML5 Rocks，文件阅读器API在主要浏览器的最新版本中实现，文件系统＆amp; File Writer API在Chrome和Opera中都实现。有关利用此API的更多信息，请参阅此Filesystem API tutorial。

根据我对Working Draft的理解，无法监视文件更改。

如果你不是严格限制在HTML5中，你可能想看看TiddlyWiki如何使用Java applet在本地保存文件，查看Dropbox Datastore API利用Dropbox作为一种数据库，或Dropbox Saver Drop-in。

Answer 3

如果您使用的是Mac，则可以告诉浏览器打开本地保存的网页，就好像它在服务器上一样。由于Mac OS X附带Apache，您可以使用http://而不是file:///，它将使用Apache Web服务器打开，而不是仅查看文件。这将像在远程服务器上一样加载它。您可以使用任何文本编辑器或IDE，只要它保存到本地文件系统即可。这不是特定于浏览器的。要加载新修改，只需保存页面＆amp;刷新浏览器。

希望这有帮助！

Answer 4

Chrome Canary中有一些名为Workspaces的东西（在撰写本文时），它允许您将页面映射到磁盘上的文件，以便保持更改。否则，您可能需要通过Web服务器提供本地文件，然后将更新发布到可以编写它们的Web服务器上。

Answer 5

不是HTML5 API。但是有一些特定于浏览器的解决方案。

例如，在IE中，您可以通过ActiveX和FileSystemObject实现这一点：

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

在FF中，可以使用XPCOM组件完成此操作。对于其他浏览器，可以使用JAVA applet。

您还可以查看twFile jquery plugin（基本上是上述方法的包装器）。

HTML5中的本地编辑器

5 个答案:

浏览器中的IDE